我正在创建一个带有react-native-elements的复选框列表。我如何一次只检查一个方框？

Question

我正在制作一个复选框列表，但是当我按下一个复选框时，它会检查所有复选框。我想一次选择一个。

我尝试了react-native-elements 1.1.0文档中的示例代码以及其他人的示例，但我找不到解决方案。

constructor() {
    super();

    this.state = {
      checked1: false,
      checked2: false,
    };
  }

render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <CheckBox
            checkedIcon='dot-circle-o'
            uncheckedIcon='circle-o'
            title='checkbox 1'
            checkedColor='red'
            checked1={this.state.checked1}
            onPress={() => this.setState({ checked1: !this.state.checked1 })}
          />
          <CheckBox
            checkedIcon='dot-circle-o'
            uncheckedIcon='circle-o'
            title='checkbox 2'
            checkedColor='red'
            checked2={this.state.checked2}
            onPress={() => this.setState({ checked2: !this.state.checked2 })}
          />
        </ScrollView>
      </View>
    );
  }
}

我想一次选择一个复选框（选择我按下的复选框，而不是一次选择所有复选框）。

Answer 1

好吧，我为你创建了一个简单的测试here。

基本上，如果你为每个复选框单独分配一个单独的状态，它就可以工作。

  constructor() {
      super();

      this.state = {
        checked1: false,
        checked2: false,
      };
    }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <CheckBox
            checkedIcon='dot-circle-o'
            uncheckedIcon='circle-o'
            title='checkbox 1'
            checkedColor='red'
            checked={this.state.checked1}
            onPress={() => this.setState({ checked1: !this.state.checked1 })}
          />
          <CheckBox
            checkedIcon='dot-circle-o'
            uncheckedIcon='circle-o'
            title='checkbox 2'
            checkedColor='red'
            checked={this.state.checked2}
            onPress={() => this.setState({ checked2: !this.state.checked2 })}
          />
        </ScrollView>
      </View>
    );
  }