选择所有复选框/行 - React hooks 应用程序

我正在努力一次勾选表格中的所有复选框。 我可以检查各个复选框，但我也想要检查的选项 一个“主复选框”，用于检查所有其他复选框。

我创建了 React 组件的简化版本：https://codesandbox.io/s/lively-wildflower-fknn9 https://codesandbox.io/s/lively-wildflower-fknn9

我正在努力解决两件事。

1. 如果我们删除两个复选框中每个复选框的选中属性，我们可以手动检查每个复选框并将其打印到控制台。如果我们通过将其设置为来覆盖检查的参数checked={checkAll}我们可以单击“全部”复选框，复选框 1 和 2 都会被选中。然而，它并没有调用onChange复选框的属性，这意味着我无法记录检查。

2. 如果我穿上checked={checkAll}属性，我基本上覆盖了复选框，这意味着复选框图标本身不会从选中状态更改为未选中状态。这onChange但是，属性被调用，并且我能够将更改记录到控制台。

我想单独检查两个复选框，并使用“主复选框”来检查两个复选框，并调用它们onChange同时。

我该怎么做呢？ 任何建议都会非常有帮助

这是一种处理方法：

代码沙盒链接 https://codesandbox.io/s/festive-framework-8l2ez?file=/src/App.js

这是最终的行为：

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [checkedAll, setCheckedAll] = useState(false);
  const [checked, setChecked] = useState({
    nr1: false,
    nr2: false
  });

  /* ################################################ */
  /* #### TOGGLES checK STATE BASED ON inputName #### */
  /* ################################################ */

  const toggleCheck = (inputName) => {
    setChecked((prevState) => {
      const newState = { ...prevState };
      newState[inputName] = !prevState[inputName];
      return newState;
    });
  };

  /* ###################################################### */
  /* #### CHECKS OR UNCHECKS ALL FROM SELECT ALL CLICK #### */
  /* ###################################################### */

  const selectAll = (value) => {
    setCheckedAll(value);
    setChecked((prevState) => {
      const newState = { ...prevState };
      for (const inputName in newState) {
        newState[inputName] = value;
      }
      return newState;
    });
  };

  /* ############################################# */
  /* #### EFFECT TO CONTROL CHECKED_ALL STATE #### */
  /* ############################################# */

  // IF YOU CHECK BOTH INDIVIDUALLY. IT WILL ACTIVATE THE checkedAll STATE
  // IF YOU UNCHECK ANY INDIVIDUALLY. IT WILL DE-ACTIVATE THE checkAll STATE

  useEffect(() => {
    let allChecked = true;
    for (const inputName in checked) {
      if (checked[inputName] === false) {
        allChecked = false;
      }
    }
    if (allChecked) {
      setCheckedAll(true);
    } else {
      setCheckedAll(false);
    }
  }, [checked]);

  /* ########################## */
  /* #### RETURN STATEMENT #### */
  /* ########################## */

  return (
    <div className="App">
      <div>
        <label>All</label>
        <input
          type="checkbox"
          onChange={(event) => selectAll(event.target.checked)}
          checked={checkedAll}
        />
      </div>
      <div>
        <label>1</label>
        <input
          type="checkbox"
          name="nr1"
          onChange={() => toggleCheck("nr1")}
          checked={checked["nr1"]}
        />
      </div>
      <div>
        <label>2</label>
        <input
          type="checkbox"
          name="nr2"
          onChange={() => toggleCheck("nr2")}
          checked={checked["nr2"]}
        />
      </div>
    </div>
  );
}