ReactJS MaterialUI Checkboxes - 在 onCheck() 中设置状态答案

【问题标题】：ReactJS MaterialUI Checkboxes- setting state within onCheck()ReactJS MaterialUI Checkboxes - 在 onCheck() 中设置状态
【发布时间】：2016-12-09 15:30:40
【问题描述】：

使用material-ui 0.15.3 和react 15.3.0。

我有一个 Checkbox 组件并想在其 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等的状态）

【问题讨论】：

标签： reactjs checkbox material-ui

【解决方案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>
  )
}

【讨论】：

感谢您的回答。那么有一个状态数组来表示哪些复选框处于活动状态？ `this.state.aBunchOfCheckboxes' 应该代表什么？
这只是为了说明这将如何与任意数量的复选框一起工作。你不需要它来完成这项工作。
非常感谢。不过，我该如何将 ID/标签附加到复选框？你能给我举个例子吗？
不太清楚你在问什么。我在我的例子中放了一个label 道具
@azium 能否请您为此 materialui- 复选框发布一个工作示例，这将很有帮助。谢谢。 :)

【解决方案2】：

我的第一个问题是为什么？为什么我不能将其保留为不受控制的组件？为什么我必须将某些东西传递给 checked 属性？

复选框需要checked 属性来决定复选框是选中还是未选中。当checked 接收到true 时，复选框显示为选中状态，当它接收到false 时，它保持未选中状态。如果你不传入一个值，它应该如何知道是显示一个选中的复选框还是一个未选中的复选框？

【讨论】：