Javascript 将所有人标记为已选中后复选框状态出现问题

当我尝试标记单个复选框时，它会起作用。如果我随后标记将所有人更改为已标记的topbox，它也会起作用。但当我试图撤销标记时，每个人都会被取消标记，除了我在单击“检查所有人”框之前单击的标记

我试着编辑状态并修复按钮中的输入。但不管怎样，它似乎都不起作用

state = {
        isAllSelected: false,
        checked: {}
    };

handleOnClick = (idx, checked) => {
            this.setState( {
                checked: {
                    ...this.state.checked,
                    [idx]: checked
                },
            })
    }


//For columns
<Checkbox id="headerCheckbox"
                 defaultChecked={false}
                 onClick={this.handleOnClick.bind(this,'all', !checked.all)}
                 checked={checked.all || false}
                 onChange={() => {}}
/>

//for rows
<Checkbox id={row._id} defaultChecked={false}
                onChange={() => {}}
                onClick={this.handleOnClick.bind(this, index, !checked[index])}
                checked={checked[index] || checked.all || false}
  />

状态={
isAllSelected:false，
选中：{}
};
handleOnClick=（idx，选中）=>{
此.setState（{
检查：{
…这个州检查过了，
[idx]：选中
},
})
}
//列
{}}
/>
//排
{}}
onClick={this.handleOnClick.bind（this，index，！checked[index]））
checked={checked[index]| | checked.all | | false}
/>

---

预期的结果是，如果我单击一些框中的行，然后单击列1，它应该标记所有人，它就是这样做的。当我再次单击时，它应该取消选中我表格中的所有框，但它只取消选中我在单击“标记所有人”框之前没有单击的框

更改您的状态，如下所示，以在状态对象中选中复选框：

由此：

 state = {
        isAllSelected: false,
        checked: {}
    };

致： 希望您的数据如下所示：

 const options = [
                {
                    name: "city",
                    value: "bangalore"
                },
                {
                    name: "city",
                    value: "chennai"
                },
                {
                    name: "city",
                    value: "delhi"
                }
            ];

及

现在this.state.checked有这样的obj:

{班加罗尔：假，钦奈：假，德里：假}

现在在onChange事件中，更改选中的对象值，如下所示：

  onCheck(checkName, isChecked) { 
    let isAllChecked = (checkName === 'all' && isChecked);
    let isAllUnChecked = (checkName === 'all' && !isChecked);
    const checked = isChecked;

    const newChecked = {...this.state.checked};

    if(checkName === 'all' && isChecked) {
      Object.keys(newChecked).forEach(v => newChecked[v] = true)
    } else if(checkName === 'all' && !isChecked) {
      checkName === 'all' && Object.keys(newChecked).forEach(v => newChecked[v] = false);
    } else {
      newChecked = { ...newChecked, [checkName]: checked };
    }

    let isAllCheckedNew = Object.keys(newChecked).every(function(k){ return newChecked[k] === true });

   this.setState({
     checked: newChecked,
     isAllSelected: isAllCheckedNew || isAllChecked
   });

---

完整的代码演示可用

我建议看一下@CWSites，我只是不想这样做。不是我怎么设置我的。我的状态是用checked:{}@Jayavel yes定义的，但我的状态是无阵列的。仅仅是一个目标checkboxes@stAMy你需要这样的东西吗？@stAMy stackblitz.com/edit/react-chck-all-uncheckall-checkbox有效吗？

  onCheck(checkName, isChecked) { 
    let isAllChecked = (checkName === 'all' && isChecked);
    let isAllUnChecked = (checkName === 'all' && !isChecked);
    const checked = isChecked;

    const newChecked = {...this.state.checked};

    if(checkName === 'all' && isChecked) {
      Object.keys(newChecked).forEach(v => newChecked[v] = true)
    } else if(checkName === 'all' && !isChecked) {
      checkName === 'all' && Object.keys(newChecked).forEach(v => newChecked[v] = false);
    } else {
      newChecked = { ...newChecked, [checkName]: checked };
    }

    let isAllCheckedNew = Object.keys(newChecked).every(function(k){ return newChecked[k] === true });

   this.setState({
     checked: newChecked,
     isAllSelected: isAllCheckedNew || isAllChecked
   });