javascript - 我正在使用 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

好的，我在这里为您创建了一个简单的测试。

基本上，如果您为每个复选框单独分配一个单独的状态，它会起作用。

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