Проблема с состоянием флажка после пометки всех как проверенных

Question

Когда я пытаюсь отметить отдельные флажки, это работает.Если я тогда отмечу 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}
  />

Ожидаемый результат состоит в том, что если я щелкаю по некоторым из своих полей для строк, а затем по столбцу один, он должен пометить каждого, что он и делает.Когда я нажимаю снова, предполагается снять все флажки в моей таблице, но снимает флажки только те, на которые я не нажимал, прежде чем щелкнул флажок «отметить всех»

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

Полный код демонстрации доступен здесь