在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 来存储应用程序的状态。它将提供更好的代码设计。

希望，它会有所帮助。