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

Question

我正在努力一次勾选表格中的所有复选框。我可以检查各个复选框，但我还希望选择一个选项来检查一个“主复选框”，该选项会检查所有其他复选框。

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

我正在努力解决两件事。

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

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

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

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

Answer 1

这是一种处理方法：

代码沙盒链接

这是最终的行为：

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