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

Question

使用material-ui 0.15.3和react 15.3.0。

我有一个 Checkbox 组件，想要在其 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()函数的复选框设置一个单独的状态变量？我觉得这很快就会变得困惑。例如(box1、box2、box3 等的状态)

Answer 1

Will I need to have a separate state variable for each checkbox?

是的，但它并不需要很麻烦。它可以是对应于特定复选框的 id 数组。

Will I need to have a separate handleCheck() functions?

当然不是，一个函数就可以了。只需传递 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>
  )
}