在React-native中，如何處理ListView中的複選框？

Question

在我的反應原生應用程序中，我試圖用複選框顯示我的應用程序聯繫人詳細信息以供選擇。 這裏是我的代碼：

<ListView 
    dataSource={this.state.dataSource} 
    renderRow={(rowData,sectionID,rowID) => 
    <TouchableHighlight onPress={() => this.goRideDetails(rowData)}> 
     <Text style={styles.rideHeader}>{rowData.name} </Text> 
     <CheckBox checked={this.state.checked} onCheckBoxPressed={()=>this.setState({checked:!this.state.checked})}/> 
    </TouchableHighlight> 
}/> 

在我看來複選框被顯示在每一行，但不工作。

任何人都可以幫助我。提前感謝。

Answer 1

您可以使用組件分離輕鬆完成此操作。請看看這裏：

export default class ContactList extends Component { 

    static propTypes = { 
     contacts: React.PropTypes.array, 
    } 

    static defaultProps = { 
     contacts: [], 
    } 

    constructor(){ 
     super(); 
     this._renderRow = this._renderRow.bind(this); 
    } 

    _renderRow(rowData,sectionID,rowID) { 
     return <Contact info={ rowData } />; 
    } 

    render() { 
     return (
      <ListView 
       dataSource={ this.props.contacts } 
       renderRow={ this._renderRow } 
      /> 
     ); 
    } 
} 

export class ContactList extends Component { 
    static propTypes = { 
     info: React.PropTypes.object.isRequired, 
    } 

    constructor(){ 
     super(); 
     this.goRideDetails = this.goRideDetails.bind(this); 
     this.setChecked = this.setChecked.bind(this); 
    } 

    goRideDetails() { 
     //your logic here 
    } 

    setChecked() { 
     this.props.info.checked = !this.props.info.checked; //will be much better to do it with redux and action creators 
    } 

    render() { 
     return (
      <TouchableHighlight onPress={ this.goRideDetails }> 
       <Text style={ styles.rideHeader }>{this.props.info.name} </Text> 
       <CheckBox checked={ this.props.info.checked } onCheckBoxPressed={ this.setChecked } /> 
      </TouchableHighlight> 
     ); 
    } 
} 

之後，你可以簡單地調用：

<ContactList contacts={this.state.dataSource} /> 

在JSX瞧

。

重要說明：請勿在jsx代碼塊中使用數組函數。

重要說明2：嘗試開始使用redux或flux來存儲應用程序的狀態。它將提供更好的代碼設計。

希望，這將有所幫助。