javascript - 处理选择所有复选框 - ReactJS

Question

嘿伙计们，我正在尝试在我的 chechbox 上分配一个功能，选择所有按钮以在单击按钮时翻转状态，但我做错了什么。有人可以帮助我吗？

我的状态：

   constructor(props) {
        super(props);
        this.state = {
           allCheckboxes: false
        };

 handleAllCheckboxes = (e) => {
    const allCheckboxesChecked = e.target.checked
    let checkboxes = document.getElementsByName('checkbox')
    this.setState({

        allCheckboxes: allCheckboxesChecked
    })
    console.log(allCheckboxesChecked)

我的单个复选框：

      <Checkbox
            checked={this.handleAllCheckboxes ? true : false}
            name='checkbox'
            color='default'
            value={JSON.stringify({ documentId: rowData.documentId, documentNumber: rowData.documentNumber })}
            onClick={this.handleCheckboxClick}
                                    />

我的全选复选框：

      <Checkbox
           onChange={this.handleAllCheckboxes}
           indeterminate
           />Select All

问题是，无论我做什么，状态都保持不变。它不会翻转为 true 或 false 。

更新

更新

https://codesandbox.io/s/upbeat-khorana-j8mr6

标签： javascriptreactjscheckbox

Answer 1

嗨，您的 Checkbox 处理程序应该位于构造函数之外。

如下所示：

constructor(props) {
        super(props);
        this.state = {
           allCheckboxes: true
        };
}




handleAllCheckboxes = (e) => {
    const allCheckboxesChecked = e.target.checked
    let checkboxes = document.getElementsByName('checkbox')
    this.setState({

        allCheckboxes: allCheckboxesChecked
    })
    console.log(allCheckboxesChecked)

}

你写了 checked={this.handleAllCheckboxes ？true : false}看起来是错误的。因为 **this.handleAllCheckboxes 已经定义，因此它将始终返回 true。（因为函数始终可用。）**。其次，handleAllCheckboxes 也没有返回任何真/假。