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

Question

我正在努力一次检查表格中的所有复选框。 我可以检查单个复选框，但我也希望选择检查 一个“主复选框”，它会检查所有其他复选框。

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

我正在努力解决两件事。

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

2. 如果我设置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>
  );
}