Question

当我尝试标记单个复选框时，它可以工作。如果我随后标记了将所有人都更改为标记的顶盒，它也将起作用。但是，当我尝试撤消标记时，除了我在单击“检查所有人”框之前单击的那些标记外，所有人都没有标记。

我曾尝试编辑状态并将输入固定在按钮中。但是，无论如何，它似乎都不起作用。


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}
  />

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

Answer 1

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

从这里：

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

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

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

和

this.state = {
        isAllSelected: false,
        checked: options.reduce((r, a) => {
          r[a.value] = false;
          return r;
        }, {}),
        checkList: options
    };

现在this.state.checked具有这样的obj：{bangalore: false, chennai: false, delhi: false}

现在在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
   });

提供完整的代码演示here

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

1 个答案: