javascript - 对状态中已检查字段的对象更新数组使用react

Question

const data = [
    {

      id: "1",
      checked: false,
    },
    {
      id: "2",
      checked: false,
    },
    {
      id: "3",
      checked: false,
    },
    {
      id: "4",
      checked: false,
    },
  ];

const [state, setState] = useState(data)

{state.map((item, index) => (
   <div key={index}>
     <input checked={item.checked} type="checkbox" />
     <span>{item}</span>
   </div>
))}

每当复选框勾选和取消勾选时，如何更新选中的内容？

一些示例，但我希望检查的项目是一个数组，例如 [{id: "1",检查: true,},{id: "2",检查: true,}];

Answer 1

您可以将 onClick 添加到 input 并根据所选项目更新状态数据。

const handleChange = (id) => {
  const clonedData = [...state];
  setState(
    clonedData.map((d) => (d.id === id ? { ...d, checked: !d.checked } : d))
  );
};

//// Your remaining code 


<input
  checked={item.checked}
  type="checkbox"
  onClick={() => handleChange(item.id)}
/>;

附件是沙箱供引用。