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

这样，您还可以处理两个以上的复选框，并且也知道其中一个由索引选中。

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

1 个答案: