ReactJS MaterialUI复选框-在onCheck()中设置状态

Question

使用material-ui 0.15.3和react 15.3.0。

我有一个复选框组件，希望在其onCheck函数中使用this.setState。

很快我就明白了，我必须手动将一些东西传递到复选框的checked道具中。如果我没有，那么我就不能使用setState。如果我尝试这样做，那么复选框的视觉组件将不会更新。例如，我单击复选框，它保持为空我的第一个问题是为什么？为什么我不能将其作为一个不受控制的组件？为什么我必须向checked道具传递一些东西

    <Checkbox
    label="1"
    style={styles.checkbox}
    onCheck={this.handleCheck.bind(this)}
    checked={this.state.box1} // if this is not supplied then I cannot use setState within handleCheck()

handleCheck（）：

  handleCheck(event, checked) {
    this.setState({
        box1: checked 
        someState: someValue 
    });
 }

现在我有多个复选框，所以我的第二个问题是，我如何构建它，使它尽可能干净？我是否需要为每个带有单独handleCheck（）函数的复选框提供一个单独的状态变量我觉得那会很快变得一团糟。例如（箱1、箱2、箱3等的状态）

Answer 1

我是否需要为每个复选框都有一个单独的状态变量？

是的，但不需要太麻烦。它可以是与特定复选框相对应的id数组。

我需要一个单独的handleCheck（）函数吗？

当然不是，一个函数就可以了。只需传递id即可。

这里有一个例子，假设你有一个可变数量的复选框：

handleCheck(id) {
  let found = this.state.activeCheckboxes.includes(id)
  if (found) {
    this.setState({ 
      activeCheckboxes: this.state.activeCheckboxes.filter(x => x !== id)
    })
  } else {
    this.setState({ 
      activeCheckboxes: [ ...this.state.activeCheckboxes, id ]
    })
  }
}
render() {
  return (
    <div>
      {this.state.aBunchOfCheckboxes.map(checkbox =>
        <Checkbox
          label={checkbox.label}
          onCheck={() => this.handleCheck(checkbox.id)}
          checked={this.state.activeCheckboxes.includes(id)}
        />
      }
    </div>
  )
}

Answer 2

我的第一个问题是为什么？为什么我不能将其作为一个不受控制的组件？为什么我必须把东西传给格子道具？

复选框需要checked属性来决定是否选中该复选框。当checked接收true时，复选框显示为已选中，而当它接收false时，则保持未选中状态。如果您不传递值，它应该如何知道是显示选中的复选框还是未选中的复选复选框？