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

Question

使用material-ui 0.15.3和react 15.3.0.

我有一个Checkbox组件,并希望this.setState在其onCheck功能中使用.

很明显,我不得不手动将一些东西传递给Checkbox的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

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

是的,但它不需要很麻烦.它可以是与特定复选框对应的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>
  )
}