使用 Hooks 在 React 中选择复选框

Question

我在 React 的表格中选择单个复选框或多个复选框时遇到问题。我正在使用 Material-UI。请在此处查看我的代码框

CLICK HERE

我想在下图中实现这样的效果：

  <TableContainer className={classes.tableContainer}>
    <Table>
      <TableHead className={classes.tableHead}>
        <TableRow>
          <TableCell padding="checkbox">
            <Checkbox
              checked={false}
              inputProps={{ "aria-label": "select all desserts" }}
            />
          </TableCell>
          {head.map((el) => (
            <TableCell key={el} align="left">
              {el}
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {body?.excluded_persons?.map((row, index) => (
          <TableRow key={row.id}>
            <TableCell padding="checkbox">
              <Checkbox checked={true} />
            </TableCell>
            <TableCell align="left">{row.id}</TableCell>
            <TableCell align="left">{row.name}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

Answer 1

似乎您只是缺少本地组件状态来跟踪每个复选框的选中状态，包括表头中的复选框。

这里是AddedPersons 组件的实现，因为它有不止一行数据，所以更有趣。

1. 创建状态以保存所选人员的状态。只添加额外的本地状态，不需要复制传递的body prop 数据（无论如何这都是反模式），也不需要添加任何派生状态，即不确定或全选（也是反模式）。

   const [allSelected, setAllSelected] = React.useState(false);
   const [selected, setSelected] = React.useState({});
   

2. 创建处理程序以切换状态。

   const toggleAllSelected = () => setAllSelected((t) => !t);
   
   const toggleSelected = (id) => () => {
     setSelected((selected) => ({
       ...selected,
       [id]: !selected[id]
     }));
   };
   

3. 当allSelected 状态更新时，使用useEffect 挂钩切换所有选定的用户。

   React.useEffect(() => {
     body.persons?.added_persons &&
       setSelected(
         body.persons.added_persons.reduce(
           (selected, { id }) => ({
             ...selected,
             [id]: allSelected
           }),
           {}
         )
       );
   }, [allSelected, body]);
   

4. 计算所选人数以确定是手动选择所有用户还是“不确定”。

   const selectedCount = Object.values(selected).filter(Boolean).length;
   
   const isAllSelected = selectedCount === body?.persons?.added_persons?.length;
   
   const isIndeterminate =
     selectedCount && selectedCount !== body?.persons?.added_persons?.length;
   

5. 附加所有状态和回调处理程序。

   return (
     <>
       <TableContainer className={classes.tableContainer}>
         <Table>
           <TableHead className={classes.tableHead}>
             <TableRow>
               <TableCell colSpan={4}>{selectedCount} selected</TableCell>
             </TableRow>
             <TableRow>
               <TableCell padding="checkbox">
                 <Checkbox
                   checked={allSelected || isAllSelected}      // <-- all selected
                   onChange={toggleAllSelected}                // <-- toggle state
                   indeterminate={isIndeterminate}             // <-- some selected
                   inputProps={{ "aria-label": "select all desserts" }}
                 />
               </TableCell>
               ...
             </TableRow>
           </TableHead>
           <TableBody>
             {body?.persons?.added_persons?.map((row, index) => (
               <TableRow key={row.id}>
                 <TableCell padding="checkbox">
                   <Checkbox
                     checked={selected[row.id] || allSelected} // <-- is selected
                     onChange={toggleSelected(row.id)}         // <-- toggle state
                   />
                 </TableCell>
                 <TableCell align="left">{row.id}</TableCell>
                 <TableCell align="left">{row.name}</TableCell>
               </TableRow>
             ))}
           </TableBody>
         </Table>
       </TableContainer>
     </>
   );
   

更新

似乎在我的第一个实现中存在一个错误，即在选中全选复选框时不允许手动取消选择人员。解决方法是将useEffect 中的逻辑移动到toggleAllSelected 处理程序中，并使用onChange 事件来切换所有正确的状态。还可以在toggleSelected 中添加一个检查，以在取消选择任何人的复选框时取消选择“全选”。

const [allSelected, setAllSelected] = React.useState(false);
const [selected, setSelected] = React.useState({});

const toggleAllSelected = (e) => {
  const { checked } = e.target;
  setAllSelected(checked);

  body?.persons?.added_persons &&
    setSelected(
      body.persons.added_persons.reduce(
        (selected, { id }) => ({
          ...selected,
          [id]: checked
        }),
        {}
      )
    );
};

const toggleSelected = (id) => (e) => {
  if (!e.target.checked) {
    setAllSelected(false);
  }

  setSelected((selected) => ({
    ...selected,
    [id]: !selected[id]
  }));
};

注意： 由于AddedPersons 和ExcludedPersons 组件基本上是相同的组件，即它是一个具有相同标题、行渲染和选定状态的表格，您应该将它们重构为单个表组件，只需传入不同的行数据。这将使您的代码更加DRY。

Answer 2

我已将您添加的人员表更新如下，

请注意，我是使用组件状态来更新表格状态的，

const AddedPersons = ({ classes, head, body }) => {

  const [addedPersons, setAddedPersons] = useState(
    body?.persons?.added_persons.map((person) => ({
      ...person,
      checked: false
    }))
  );

  const [isAllSelected, setAllSelected] = useState(false);
  const [isIndeterminate, setIndeterminate] = useState(false);

  const onSelectAll = (event) => {
    setAllSelected(event.target.checked);
    setIndeterminate(false);
    setAddedPersons(
      addedPersons.map((person) => ({
        ...person,
        checked: event.target.checked
      }))
    );
  };

  const onSelect = (event) => {
    const index = addedPersons.findIndex(
      (person) => person.id === event.target.name
    );
    // shallow clone
    const updatedArray = [...addedPersons];
    updatedArray[index].checked = event.target.checked;
    setAddedPersons(updatedArray);

    // change all select checkbox
    if (updatedArray.every((person) => person.checked)) {
      setAllSelected(true);
      setIndeterminate(false);
    } else if (updatedArray.every((person) => !person.checked)) {
      setAllSelected(false);
      setIndeterminate(false);
    } else {
      setIndeterminate(true);
    }
  };

  const numSelected = addedPersons.reduce((acc, curr) => {
    if (curr.checked) return acc + 1;
    return acc;
  }, 0);

  return (
    <>
      <Toolbar>
        {numSelected > 0 ? (
          <Typography color="inherit" variant="subtitle1" component="div">
            {numSelected} selected
          </Typography>
        ) : (
          <Typography variant="h6" id="tableTitle" component="div">
            Added Persons
          </Typography>
        )}
      </Toolbar>
      <TableContainer className={classes.tableContainer}>
        <Table>
          <TableHead className={classes.tableHead}>
            <TableRow>
              <TableCell padding="checkbox">
                <Checkbox
                  checked={isAllSelected}
                  inputProps={{ "aria-label": "select all desserts" }}
                  onChange={onSelectAll}
                  indeterminate={isIndeterminate}
                />
              </TableCell>
              {head.map((el) => (
                <TableCell key={el} align="left">
                  {el}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {addedPersons?.map((row, index) => (
              <TableRow key={row.id}>
                <TableCell padding="checkbox">
                  <Checkbox
                    checked={row.checked}
                    onChange={onSelect}
                    name={row.id}
                  />
                </TableCell>
                <TableCell align="left">{row.id}</TableCell>
                <TableCell align="left">{row.name}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
};

export default AddedPersons;

请参考这里的工作示例：https://codesandbox.io/s/redux-react-forked-cuy51