как выбрать все флажки на основе группы в reactjs

Question

Я сделал начальное состояние для выбора одного флажка. Вот мое начальное состояние

     this.state = {
          fruites: [
            { id: 1 , value: "banana", isChecked: false },
            { id: 2, value: "apple", isChecked: false },
            { id: 3,value: "mango", isChecked: false },
            { id: 4, value: "grap", isChecked: false }
          ]
        };
      }

Метод: я просто это для выбранных все флажок

      handleAllChecked = id => event => {
        let fruites = this.state.fruites;
        fruites.forEach(fruite => {
          data.filter(item => 
              fruite.isChecked = event.target.checked;

          });
        });
        this.setState({ fruites: fruites });
      };

Я просто этот метод для отдельных checkbox.

      handleCheckChieldElement = event => {
        let fruites = this.state.fruites;
        fruites.forEach(fruite => {
          if (fruite.value === event.target.value)
            fruite.isChecked = event.target.checked;
        });
        this.setState({ fruites: fruites });
      };

Render: Вот мой пользовательский интерфейс, я хочу установить флажок All на основе группы. Например, у меня есть две группы значений - такие как Group, Topgroup. Проблема в том, что, когда я нажимаю на группу, она устанавливает флажок Все, включая Topgroup, а также я щелкаю банан, он выбирает весь банан, я не хочу получать весь банан, когда нажимаю на один элемент. Я не хочу получать флажок topgroup, когда я выбираю группу.

            {[{ id: 1, name: "group" }, { id: 2, name: "topGropup" }].map(item => (
              <div>
                <input
                  type="checkbox"
                  onChange={this.handleAllChecked(item.id)}
                  value="checkedall"
                />{" "}
                {item.name}
                <ul>
                  {this.state.fruites.map((fruite, index) => {
                    return (
                      <CheckBox
                        key={index}
                        handleCheckChieldElement={this.handleCheckChieldElement}
                        {...fruite}
                      />
                    );
                  })}
                </ul>
              </div>
            ))}
          </div>

Как я могу решить эту проблему. Вот мой кодовый ящик: https://codesandbox.io/s/react-multi-select-checkbox-or6ko

Answer 1

Указатель памяти на один и тот же список

Группы в приложении имеют одинаковый указатель на список фруктов в памяти.

, поскольку обновления будут влиять на обе группы.

Посмотрите, как я это исправил:

https://codesandbox.io/s/react-multi-select-checkbox-r29d1

Я нашел в приложении некоторые вещи, которые можно улучшить, поэтому я улучшаю их, например:

label до input флажок, чтобы можно было также нажать на текст

Я здесь, если у вас есть какие-либо проблемы, я предлагаю вам изучить крючки.

Answer 2

Здесь я отредактировал ваши коды и ящики: https://codesandbox.io/s/react-multi-select-checkbox-bbuky

В основном у вас есть 8 флажков, хотя отображаются 4 элемента, дублированные для каждой группы.

I добавили 4 пропущенных элемента в вашем состоянии, но вы бы на самом деле хотели иметь какую-то фабричную функцию, которая позволит вам создавать свое состояние с учетом имеющихся у вас групп.

Мне пришлось редактировать некоторые из ваших значений, так как вы полагались на вещи, которые теперь не являются уникальными, например value, и используйте id группы, например, для создания уникального идентификатора groupId-itemId.