如何多重检查 react-native-elements 复选框？答案

【问题标题】：how to multi-check react-native-element's checkbox?如何多重检查 react-native-elements 复选框？
【发布时间】：2019-12-04 20:35:24
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs react-native

【解决方案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)} />
      )
    })
  )

【讨论】：

关于如何在 RN 中使用复选框的最佳在线示例。
这是在我的应用中使用的 toggleCheckbox：toggleCheckbox(id) { let changedCheckbox = this.state.checkboxes.find((cb) => cb.id === id); changedCheckbox._checked = !changedCheckbox._checked; let chkboxes = this.state.checkboxes; for (let i=0; i < chkboxes.length; i++) { if (chkboxes[i].id === id) { chkboxes.splice(i, 1, changedCheckbox); }; }; this.setState({ checkboxes: chkboxes, }); }

【解决方案2】：

尝试检查一下：

import { CheckBox, View } from 'react-native'

class QuizScreen extends Component {
  constructor(props) {
    super(props)
    // this is the default state on page load
    this.state = {
      checkbox1: false,
      checkbox2: false,
      checkbox3: false,
    }
  }

  render() {
    return (
      <View> ... etc
        <CheckBox
          value={this.state.checkbox1}
          onChange={() => this.setState({ checkbox1: !this.state.checkbox1 })}
        />

        <CheckBox
          value={this.state.checkbox2}
          onChange={() => this.setState({ checkbox2: !this.state.checkbox2 })}
        />

        <CheckBox
          value={this.state.checkbox3}
          onChange={() => this.setState({ checkbox3: !this.state.checkbox3 })}
        />
      </View>
    )
  }
}

发生了什么事？

默认状态在构造函数中设置
值this.state.checkbox1是当前值
this.setState({ prop: 'value' }) 指的是您的构造函数中的道具
this.setState({ checkbox1: !this.state.checkbox1 }) 将值设置为与当前设置相反的值

您链接的问题中的问题是该人有：

this.state = { checked: false }

但是他/她有多个复选框，所以他们都在编辑状态对象的同一个属性。

请注意我的示例在 state 对象上有 3 个属性。 zvona 在此处的另一个答案非常适合处理多个问题。

【讨论】：