2017-05-23 18 views
0

私はこの問題が来れば、私は知らない、私は、このチェックボックスパッケージListViewコンポーネントをどのように反応させてリフレッシュするのですか?

反応し、ネイティブチェックボックスを

を使用しようとしている、ToDoリストを作成しようとしていますそのパッケージから enter image description here

私は、チェックボックスをクリックし、[削除]ボタンをクリックしたときに、これは

enter image description here アン起こるものですdはここにリストを表示するための私のコードです

interface TodoProps{ 
     todo: TodoModel; 
     ter:string; 
    } 
    interface TodoState{ 
     dataSource: any; 
     myTodo: Array<ITodo>; 
    } 

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => true}); 

    export default class Todo extends React.Component <TodoProps,TodoState>{ 

     constructor(props:TodoProps) { 
      super(props); 

      this.state = { 
       dataSource: ds.cloneWithRows([]), // or put your initial data here 
       myTodo: [] 
      }; 
     } 

    componentWillReceiveProps = (nextProps) => { 
      console.log(this.state.myTodo); 
     let data = { 
      title: nextProps.ter, 
      isChecked: false 
     }; 
     let todoList = this.state.myTodo; 

     if (nextProps.ter) { 
      todoList.push(data); 
     } 

     this.setState({ 
      myTodo: todoList 
     }); 

    } 

     onDelete(){ 
      let todos = this.state.myTodo.filter((todo:ITodo) => { 
       return !todo.isChecked; 
      }); 

      this.setState({ 
       myTodo: todos 
      }); 
     } 

     render() { 

      let dataSource = this.state.dataSource.cloneWithRows(this.state.myTodo); 
      return (
       <View style={styles.container}> 
        <View style={styles.box2}> 
         <ListView enableEmptySections={true} dataSource={dataSource} renderRow={(rowData, sectionID, rowID) => <TodoList data={rowData} onClick={this.onClick.bind(this)} id={rowID} /> } /> 
        </View> 
        <View style={styles.box3}> 
         <TouchableOpacity style={styles.bbox1} onPress={()=> alert('weee')}> 
          <Text style={styles.tabText}>All</Text> 
         </TouchableOpacity> 
         <TouchableOpacity style={styles.bbox2} onPress={()=> alert('weee')}> 
          <Text style={styles.tabText}>Complete</Text> 
         </TouchableOpacity> 
         <TouchableOpacity style={styles.bbox3} onPress={()=> alert('weee')}> 
          <Text style={styles.tabText}>InComplete</Text> 
         </TouchableOpacity> 
         <TouchableOpacity style={styles.bbox4} onPress={()=> this.onDestroy()}> 
          <Text style={styles.tabText}>Delete</Text> 
         </TouchableOpacity> 
        </View> 
       </View> 
      ) 
     } 
    } 

しかし、私はコンソールのログデータです。私はすべてisCheckeを見つける:falseに。チェックボックスの表示のみが機能していません。このためにcomponentwillamount()を使う必要がありますか?

答えて

0

は、以下のサンプルコードrefrescontrolを使用する場合には動作しません

_onRefresh() { 
    this.setState({refreshing: true}); 
    // your callback function or call this.componentDidMount() 
    } 

    render() { 
    return (
     <ListView 
     refreshControl={ 
      <RefreshControl 
      refreshing={this.state.refreshing} 
      onRefresh={this._onRefresh.bind(this)} 
      /> 
     } 
     ... 
     > 
     ... 
     </ListView> 
    ); 
    } 
+0

を使用してください。私はthis.componentDidMount()を使用しませんでした。 – user3818576

+0

コールバックthis.componentWillReceiveProps() – Arunkumar

+0

_onRefresh()内でconsole.log()を試してみます。それは動作しません。私が削除ボタンをクリックした時 – user3818576

関連する問題