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

Question

我正在努力一次检查表格中的所有复选框。
我可以检查单个复选框，但我也希望选择检查
一个“主复选框”，它检查所有其他复选框。
我创建了我的 React 组件的简化版本:
https://codesandbox.io/s/lively-wildflower-fknn9
我正在努力解决两件事。

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

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

我想单独检查两个复选框，并使用“主复选框”来检查两个复选框，并调用它们的 onChange同时。
我该怎么做呢？
任何建议都会非常有帮助

Answer 1

这是一种处理方式:
CodeSandbox link
这是最终的行为:

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