在反应中一次切换一个复选框

Question

我有一个渲染材质 UI 表的 React 组件。该表填充有从 API 获取的数据。在其中一个表格单元格中，我有一个 Material UI 开关，用于切换用户是被阻止还是处于活动状态。然而，每当我检查其中一个开关时，所有开关都会同时被检查，这不是我想要实现的目标。我希望能够单独检查每个开关，而不影响其他开关的状态。有什么好方法可以完成这个任务吗？

下面是示例代码片段：

    const Customers = ({customers}) => {
        const [checked, setChecked] = useState(false);

        const handleSwitchChange = (event) => {
        setChecked(event.target.checked);
    }
        return customers.map((customer) => {
    const {_id, name, email, } = customer;
    return (
      <TableRow hover role="checkbox" tabIndex={-1} key={_id}>
        <TableCell style={{ minWidth: 150 }}>{name}</TableCell>
        <TableCell>{email}</TableCell>
        <TableCell>Activated</TableCell>
        <TableCell align="center">
          <Switch
            color="error"
            onChange={handleSwitchChange}
            checked={checked}
          />
        </TableCell>
        <TableCell>
          <CustomIconButton
            startIcon={<VisibilitySharpIcon />}
            title="Details"
          />
          <CustomIconButton
            startIcon={<EditSharpIcon />}
            title="Edit"
          />
          <CustomIconButton
            startIcon={<MailSharpIcon />}
            title="Send"
          />
          <IconButton>
            <DeleteSharpIcon />
          </IconButton>
        </TableCell>
      </TableRow>
    );
  });
}

Answer 1

你正在做的是检查变量与React功能组件相关，所以当你setChecked(true)时，你将为所有复选框设置它。

每个客户都应该有一个检查值。因此，当您处理开关时，您应该映射您的客户以找到想要的开关（使用 id，您将通过handleSwitch 函数传递它）。然后当您找到它时，您将获得一个过滤列表，然后您应该访问第一个列表（filteredList.first）。
并设置checked=!checked。
解决方案2 将索引传递给函数handleSwitch 并将customers[index].checked 设置为相反的值。

Answer 2

您正在将公共选中选项传递给所有行。请将其他参数（例如 isChecked）单独传递到您的行，并通过将键传递给该函数来更改该函数上的该参数。

Answer 3

您应该创建一个单独的组件 (SwitchComp) 来隔离切换逻辑，如下所示。

import { useState } from "react";

const SwitchComp = ({ color = "error" }) => {
  const [checked, setChecked] = useState(false);

  const handleSwitchChange = (event) => {
    setChecked(event.target.checked);
  };

  return (
    <Switch color={color} onChange={handleSwitchChange} checked={checked} />
  );
};

在之前使用 Switch 组件的地方使用 SwitchComp，如下所示。

const Customers = ({ customers }) => {
  return customers.map((customer) => {
    const { _id, name, email } = customer;
    return (
      <TableRow hover role="checkbox" tabIndex={-1} key={_id}>
        <TableCell style={{ minWidth: 150 }}>{name}</TableCell>
        <TableCell>{email}</TableCell>
        <TableCell>Activated</TableCell>
        <TableCell align="center">
          <SwitchComp color="error" />
        </TableCell>
        <TableCell>
          <CustomIconButton
            startIcon={<VisibilitySharpIcon />}
            title="Details"
          />
          <CustomIconButton startIcon={<EditSharpIcon />} title="Edit" />
          <CustomIconButton startIcon={<MailSharpIcon />} title="Send" />
          <IconButton>
            <DeleteSharpIcon />
          </IconButton>
        </TableCell>
      </TableRow>
    );
  });
};