Question

我正在使用react-native-elements复选框，我有2个复选框，我只想选择其中一个，我设法做到这一点，但是我试图只用console.log复选框，但不是工作，因为它们具有两种不同的状态，那么如何确定使用该状态在我的应用程序中选中了哪个框？这是代码：

初始状态：

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属性，我想基于复选框将已婚或单身作为字符串值发送

Answer 1

看起来像是异或运算。您需要通过查看单击按钮的过去状态来设置每个人的当前状态。

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

单个：

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

已婚

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

Answer 2

确实存在三个条件。

用户尚未选择框
用户选择单个
用户选择已婚。

如果您具有验证功能，这意味着用户必须选中一个框，则可以取消第一个条件。由此，一旦用户选择了一个盒子，就可以知道仅一个盒子的状态，从而知道他们的选择。因此，如果您有一个检查验证的按钮，则可以执行以下操作。

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

希望这对您有用。：）

如何确定您的状态中选中了哪个复选框？

3 个答案: