如何多检查react-native-element的复选框？

Question

我是 React Native 的新手，我正在通过使用“react-native-elements”生成复选框来构建一个具有多种选择的测验应用程序。但我不知道如何控制多检查功能。我在这里搜索并找到了解决方案。

但是我还是不明白，在使用 Michael Peyer 解决方案时，我应该在构造函数上定义哪个状态来适应这个解决方案？

  constructor(props) {
    super(props);
    this.state = ??;
  }

Answer 1

这遵循 RN 的基本原则并在状态中处理数组。我检查了react-native-elements文档，它应该可以正常工作。虽然可能有一些改进的空间，但从这个开始：

constructor(props) {
  super(props);

  this.state = {
    checkboxes: [{
      id: 1,
      title: 'one',
      checked: false,
    }, {
      id: 2,
      title: 'two',
      checked: false,
    }],
  };
}

...

toggleCheckbox(id) {
  const changedCheckbox = this.state.checkboxes.find((cb) => cb.id === id);

  changedCheckbox.checked = !changedChecbox.checked;

  const checkboxes = Object.assign({}, this.state.checkboxes, changedCheckbox);

  this.setState({ checkboxes });
}

...

render ()
  return (
    this.state.checkboxes.map((cb) => {
      return (
        <Checkbox
          key={cb.id}
          title={cb.title}
          checked={cb.checked}
          onPress={() => this.toggleCheckbox(cb.id)} />
      )
    })
  )