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

发布时间：2020-12-15 05:04:03 所属栏目：百科来源：网络整理

导读：在我的本机应用程序中,我正在尝试使用复选框显示我的应用程序联系人详细信息以供选择. 这是我的代码： ListView dataSource={this.state.dataSource} renderRow={(rowData,sectionID,rowID) = TouchableHighlight onPress={() = this.goRideDetails(rowData)

在我的本机应用程序中,我正在尝试使用复选框显示我的应用程序联系人详细信息以供选择.
这是我的代码：

<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>
 }/>

在我的视图中,复选框显示在每一行,但不起作用.

任何人都可以帮助我.谢谢.

您可以使用组件分离轻松完成此操作.请看看这里：

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

希望,这会有所帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!