1

我正在使用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属性，我想根据复选框发送已婚或单身作为字符串值

4

3 回答 3

1

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

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

单身的：

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

已婚

{single:this.state.married, married: !this.state.married}
于 2019-03-03T19:05:30.087 回答
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
   }
  }}
/>
于 2019-03-03T20:18:02.100 回答
0

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

如果您想让这两个复选框在加载时都处于未选中状态，那么

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

希望这对你有用。:)

于 2019-03-03T20:14:58.387 回答