Javascript Handle选择所有复选框-ReactJS

嘿，伙计们，我正试图在我的复选框上指定一个功能“全选”按钮，以在单击按钮时翻转状态，但我做错了什么。有人能帮我吗

我的状态：

   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

全选

问题是，无论我做什么，状态都保持不变。它不会变为真或假

更新

更新

---

您好，您的复选框处理程序应该位于构造函数之外

如下图所示：

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。（因为函数始终可用）。**。其次，Handleall复选框也不会返回任何true/false。

当单击“全部选择”时，您需要将复选框的状态保持在状态，将其状态更改为true，反之亦然

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
复选框：{
车辆1：错误，
车辆2：错误，
车辆3：错误，
}
};
}
HandleCheckBox=（复选框，checkAll=false）=>{
如果（全部选中）{
常量复选框={…this.state.checkbox}；
Object.key（复选框）.forEach（（key）=>{
复选框[键]=checkBox.target.checked；
});
这是我的国家({
复选框：复选框
})
回来
}
const{checked，name}=checkBox.target；
这是我的国家(
prevState=>{
返回{
复选框：{…prevState.checkbox，[名称]：选中}
};
},
（）=>console.log（this.state）
);
//console.log（checkBox.target.checked）；
};
render（）{
返回(
this.handlecheckbox（e，true）}
name=“车辆1”
value=“自行车”
/>
全选


);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

有一个软件包可以解决这个问题

您只需将复选框包装在复选框组中并添加AllChecker

import React from 'react';
import {
  CheckboxGroup,
  AllCheckerCheckbox,
  Checkbox
} from "@createnl/grouped-checkboxes";

const App = (props) => {
  const { products } = props

  return (
    <CheckboxGroup onChange={console.log}>
      <label>
        <AllCheckerCheckbox />
        Select all
      </label>
      {options.map(option => (
        <label>
          <Checkbox id={option.id} />
          {option.label}
        </label>
      ))}
    </CheckboxGroup>
  )
}

从“React”导入React；
进口{
CheckboxGroup，
所有检查复选框，
复选框
}来自“@createnl/分组复选框”；
常量应用=（道具）=>{
const{products}=props
返回(
Hey@Pramod Nikam通过这种方式，我总是收到一个真实的值。HandleallCheckBox？true:false是一个问题
checked={this.state.allCheckboxese}
？如何保持每个复选框的状态？