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

Question

使用 material-ui 0.15.3 和 react 15.3.0。

我有一个复选框组件，想在其 onCheck 功能中使用 this.setState。

很快我就发现我必须手动将一些东西传递到 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

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>
  )
}

Answer 2

My first question is why? Why can't I keep this as an uncontrolled component? Why must I pass something into the checked prop?

checkbox需要checked 属性来决定checkbox是否被选中。当 checked 收到 true 时，复选框显示为已选中，而当它收到 false 时，则保持未选中状态。如果你不传入一个值，它怎么知道是显示选中的复选框还是未选中的复选框？

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

ReactJS MaterialUI Checkboxes- setting state within onCheck()

checkbox

reactjs

material-ui