Я создаю список флажков с помощью react-native-elements. Как мне проверять только одно поле за раз?

#javascript #ios #react-native #checkbox #react-native-elements

#javascript #iOS #react-native #флажок #react-native-elements

Вопрос:

Я создаю список флажков, но когда я нажимаю на один флажок, он проверяет все флажки. Я хочу выбирать по одному за раз.

Я попробовал пример кода из документации 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>
    );
  }
}

Я хочу устанавливать по одному флажку за раз (установите флажок, на который я нажал, вместо того, чтобы выбирать все сразу).

1. вместо того, чтобы иметь одинаковое состояние для обоих флажков, для этого вам понадобятся отдельные состояния. можете ли вы попробовать добавить состояния checked1 и checked2 расположить их соответственно соответствующим флажкам?

2. Здравствуйте, спасибо за ваш ответ. Я действительно пробовал это, но когда я это сделал, когда я нажимаю, он не проверяет ни одного: (Я обновлю код, чтобы показать вам, что я сделал @kenmistry

3. о. я поделился своим ответом ниже, и он точно такой же: P. можете ли вы взглянуть на тестовую ссылку? у меня это работает с моей стороны. вы можете установить флажок по отдельности.

Ответ №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>
    );
  }