代码之家 › 专栏 › 技术社区 › stAMy

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

checkbox reactjs html javascript

stAMy · 技术社区 · 5 年前

当我尝试标记单个复选框时,它会起作用。如果我随后标记将所有人更改为已标记的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}
  />

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

1 回复 | 直到 5 年前

Jayavel 5 年前

如下图所示更改您的状态,以在状态对象中选中复选框:

由此:

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

{bangalore: false, chennai: false, delhi: false}

  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