react-native - 在 React-native 中，如何处理 Listview 中的复选框？

Question

在我的 react-native 应用程序中，我试图用复选框显示我的联系方式以供选择。
这是我的代码:

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

希望，它会有所帮助。