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

Question

我有一个呈现材质 UI 表的反应组件。 此表填充了从 API 中获取的数据。在其中一个表单元格中，我有一个 Material UI 开关，用于切换用户是被阻止还是处于活动状态。 但是，每当我检查其中一个开关时，所有开关都会同时被检查，这不是我想要实现的。 我希望能够单独检查每个交换机而不影响其他交换机的 state。 有没有很好的方法来完成这项工作？

下面是一个示例代码片段：

    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

您正在做的是 checked 变量与 React 功能组件相关，因此当您设置 Checked(true) 时，例如您将为所有复选框设置它。

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

Answer 2

您正在将通用选中选项传递给所有行。 请将其他参数（如 isChecked indigual）传递给您的行，并通过将密钥传递给它来更改 function 上的该参数。

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