Question

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

但我仍然不明白，当使用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)} />
      )
    })
  )

Answer 2

尝试检查一下：

import { CheckBox } 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这里的另一个答案非常适用于处理多个。

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

2 个答案: