在 React Native 中使用多个复选框处理状态

Question

我有一个带有两个复选框的简单表单，供某人选择一个或另一个，即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 处于未选中状态，反之亦然？一般来说，捕获状态以便我可以使用它的最佳方法是什么。

Answer 1

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

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

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