3

我有一个简单的表格，带有两个复选框，供某人选择一个或另一个，即Yes两者都不选择No。我正在使用React-native-element如下所示的工具包。

export default class CheckerForm extends React.Component {
     state = {
       checked: false,
      }
    handleYesCheck =() => {
       this.setState({checked: !this.state.checked})
    }

    handleNoCheck =() => {
      this.setState({checked: !this.state.checked})
    }

    render(){

   const { checked } = this.state
     return (
      <View>
       <CheckBox
       center
        title='Yes'
        checked={checked}
        onPress={this.handleYesCheck}
     />
     <CheckBox
      center
      title='No'
      checked={checked}
      onPress={this.handleNoCheck}
    />
   <View>

我想捕获并修改复选框的状态，但是当我单击其中一个复选框时，我会修改另一个复选框的状态，即两者都将被选中和未选中。如何独立修改复选框的状态，以便当我单击时Yes，No未选中，反之亦然？一般来说，捕获状态以便我可以使用它的最佳方法是什么。

4

1 回答 1

4

您可以做的是拥有一组复选框，并将选中的索引保存在状态中。

state = {
  checkedId: -1,
  checkboxes: [{
    id: "yes",
    title: "Yes"
  }, {
    id: "no",
    title: "No"
  }]
}

handleCheck = (checkedId) => {
  this.setState({
    checkedId
  })
}

render() {
    const {
      checkboxes,
      checkedId
    } = this.state
    return ( <
      View > {
        checkboxes.map(checkbox => ( <
            CheckBox center key = {
              checkbox.id
            }
            title = {
              checkbox.title
            }
            checked = {
              checkbox.id == checkedId
            }
            onPress = {
              () => this.handleCheck(checkbox.id)
            }
            />
          )
        } <
        View >
      )
    }

这样，您还可以处理两个以上的复选框，并且还可以知道索引检查了哪一个。

于 2019-07-22T17:35:14.630 回答