如何在 React 中处理多个复选框？

Question

我是新手。我有一个任务：

显示多个复选框。
复选框的名称将来可以重新排列。（客户可以决定哪个复选框值显示在顶部等等）。
根据订单号显示复选框
复选框下方将有一个提交按钮，该按钮将在加载。强制用户勾选所有复选框然后才点击按钮应该启用。
点击保存按钮，将数据发送到后端。（暂时我会登录到控制台）。

我正在使用 react with typescript。
我已附上快照以供参考。
到目前为止我已经这样做了：

import React, { useState } from "react";

interface Data {
  name: string;
  order: number;
}

const MyCheckBoxList: Data[] = [
  {
    order: 0,
    name: "Angular",
  },
  {
    order: 1,
    name: "React",
  },
  {
    order: 2,
    name: "Java",
  },
];

const MultipleCheckBoxComponent = () => {
  const [checked, setChecked] = useState(false);

  return (
    <div>
      <h3>Multiple checbox </h3> <br />
      <ul>
        {MyCheckBoxList.map(({ name, order }, index) => {
          return (
            <li key={index}>
              <div>
                <div>
                  <input
                    type="checkbox"
                    id={`custom-checkbox-${index}`}
                    name={name}
                    value={name}
                  />
                </div>
              </div>
            </li>
          );
        })}
      </ul>
      <button type="submit">Save</button>
    </div>
  );
};

export default MultipleCheckBoxComponent;

谁能告诉我：
如何根据订单号显示复选框（正如我在第 3 点中提到的）以及如何实现第 4 点？（只有当所有复选框都被打勾时，按钮才应该启用）

Answer 1

您可以在设置状态时根据您的要求对数据进行排序，即作为状态的默认值。

const [data, setData] = useState(
  MyCheckBoxList.sort((a, b) => a.order - b.order)
);

您需要验证每个复选框的值，然后只有您可以启用您的按钮。因为您必须存储每个项目的价值。为此，您可以创建一个可以呈现复选框的简单组件，然后您可以在其中更新复选框值以及主要数据。

最后，验证更新后的数据，以便您可以启用或禁用提交按钮。

const isVerified = useMemo(() => {
    return data.every((d) => d.checked);
}, [data]);

return (
    <div className="App">
        {data.map((obj, index) => (
        <li key={index}>
            <Checkbox
            obj={obj}
            onChange={(item) => {
                setData(data.map((d) => (d.order === item.order ? item : d)));
            }}
            />
        </li>
    ))}
</div>)

这是我的复选框组件。

const Checkbox = ({ obj, onChange }) => {
  return (
    <>
      <input
        type="checkbox"
        id={`custom-checkbox-${obj.index}`}
        name={obj.name}
        value={obj.checked}
        onChange={() => onChange({ ...obj, checked: !obj.checked })}
      />
      {obj.name}
    </>
  );
};

正在附加沙箱 link 以便您可以基于此更新您的逻辑。

如何在 React 中处理多个复选框？

How to handle multiple checkboxes in React?

typescript

reactjs

react-typescript