如何多检查react-native-element的复选框? [英] how to multi-check react-native-element's checkbox?

问题描述

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

I'm a newbie with React Native, I'm building a quiz application with multiple choices by using "react-native-elements" to generate the checkboxes. But I don't know how to control the multi-check function. I have searched and found a solution here.

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

But I still don't understand that when using Michael Peyer solution, which is the state I should define on the constructor function to adapt this solution?

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

推荐答案

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

This follows the basic principles of RN and handling an array inside state. What I checked the react-native-elements docs, it should work as is. Although there may be some room for improvement, but start with this:

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

这篇关于如何多检查react-native-element的复选框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！