我如何确定您的州选择哪个复选框

Question

我正在使用React-Native-elements复选框，我有2个复选框，我只想选择其中一个，我设法做到了，但是我正在尝试安装。仅记录检查框，但由于它们具有两个不同的状态而无法工作，因此如何使用状态确定在我的应用程序中检查哪个框？这是代码：

初始状态：

state: {
  single: false,
  married: false
}

复选框：

 <CheckBox title="Single"
              checked={this.state.single}
              onPress={() => this.setState({ single: !this.state.single, 
              married: false})}/>
 <CheckBox title="Married"
              checked={this.state.married}
              onPress={() => this.setState({ married: !this.state.married, 
              single: false})}/>

我有一个API，我想在其中发布数据，它具有maritalStatus属性，我想根据Checked Box

Answer 1

实际上存在三个条件。

1. 用户尚未选择一个盒子
2. 用户选择单个
3. 用户选择已婚。

如果您有验证，则意味着用户必须选中一个框，则可以打折第一个条件。因此，一旦用户选择了一个框，他们的选择就是只知道其中一个盒子的状态，就可以分辨出什么。因此，如果您有一个检查验证的按钮，则可以执行这样的操作。

<Button 
  title={'check married status'}
  onPress={() => {
   if (!this.state.single && !this.state.married) {
     alert('Please check a box)
   } else {
     // we only need to check one of them
     let marriedStatus = this.state.married ? 'married' : 'single';
     alert(`You are ${marriedStatus}`)
     // then you can do what you want with the marriedStatus here
   }
  }}
/>

Answer 2

看起来它们是XOR操作。您需要通过查看点击按钮的过去状态来设置每个人的当前状态。

http://www.howtocreate.co.uk/xor.html

单人：

{single: !this.state.single, married: this.state.single}

已婚

{single:this.state.married, married: !this.state.married}

Answer 3

我认为您不需要为此管理两个状态。在这种情况下，一个人可以结婚或单身。因此，您需要做这样的事情

如果您想将两个复选框都放在负载上，则

state: {
  single: void 0,
}

<CheckBox title="Single"
              checked={this.state.single}
              onPress={() => this.setState({ single: !this.state.single})}/>
 <CheckBox title="Married"
              checked={this.state.single !== undefined && !this.state.single}
              onPress={() => this.setState({ married: !this.state.single})}/>

或者如果检查了，则

state: {
  single: true,
}

<CheckBox title="Single"
              checked={this.state.single}
              onPress={() => this.setState({ single: !this.state.single})}/>
 <CheckBox title="Married"
              checked={!this.state.single}
              onPress={() => this.setState({ married: !this.state.single})}/>

希望这对您有用。：）