Я создаю список флажков с реактивными элементами. Как поставить галочку только по одному?

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

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

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


ios react-native javascript checkbox react-native-elements
person levydevy    schedule 18.04.2019    source источник
comment
вместо того, чтобы иметь одно и то же состояние для обоих флажков, для этого вам понадобятся отдельные состояния. Вы можете попробовать добавить состояния checked1 и checked2, расположив их в соответствии с соответствующими флажками?   -  person kenmistry    schedule 18.04.2019
comment
Здравствуйте, спасибо за ваш ответ. Я на самом деле пытался это сделать, но когда я это сделал, когда я нажимаю, он ничего не проверяет :( Я обновлю код, чтобы показать вам, что я сделал @kenmistry   -  person levydevy    schedule 18.04.2019
comment
ой. я поделился своим ответом ниже, и он точно такой же: P. ссылку на тест можно глянуть? у меня это работает на моем конце. вы можете поставить галочку отдельно.   -  person kenmistry    schedule 18.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, я создал для вас простой тест здесь.

в принципе, если бы вы назначили отдельное состояние для каждого флажка в отдельности, это сработало бы.

  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>
    );
  }
person kenmistry    schedule 18.04.2019
comment
Собственно, у меня получилось! Я поставил проверенные1 и проверенные2 вместо проверенных. Спасибо за вашу помощь: D @kenmistry - person levydevy; 18.04.2019