ReactJS MaterialUI复选框 - onCheck中的设置状态（）

使用material-ui 0.15.3和react 15.3.0。ReactJS MaterialUI复选框 - onCheck中的设置状态（）

我有一个复选框组件，并希望在其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 
    }); 
}

现在我已经多个复选框，所以我的第二个问题是，我怎么能结构此所以它是尽可能干净？我需要为每个checkbox（）函数分别设置一个单独的状态变量吗？我觉得这很快就会变得麻烦。例如（状态为box1，box2，box3等）

来源

2016-08-03 Rolodecks

我需要为每个复选框分别设置一个状态变量吗？

是的，但它并不需要繁琐。它可以是与特定复选框相对应的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> 
) 
}

来源

2016-08-03 19:15:27 azium

感谢您的回答。所以有一个状态数组表示哪些复选框处于活动状态？ 'this.state.aBunchOfCheckboxes'应该代表什么？ – Rolodecks

这只是为了说明这将如何与任何数量的复选框工作。你不需要这项工作。 – azium

谢谢一堆。我怎么去附加一个ID /标签复选框，但？你能告诉我一个例子吗？ – Rolodecks

我的第一个问题是为什么呢？为什么我不能把它作为一个不受控制的组件？为什么我必须将某些东西传递给检查的道具？

复选框需要checked属性来决定复选框是选中还是取消选中。当checked收到true时，该复选框显示为已选中，当收到false时，该复选框保持未选中状态。如果你不传递一个值，应该怎么知道是否显示一个复选框或一个未选中的复选框？

来源

2017-04-19 12:14:02

ReactJS MaterialUI复选框 - onCheck中的设置状态（）

回答

相关问题