带有多选功能的有状态复选框

渲染一个复选框列表，使用回调函数将选中的值/值传递给父组件。

• 使用 useState() 钩子创建 data 状态变量，并使用 options 属性初始化其值。
• 创建一个 toggle 函数，使用扩展运算符 (...) 和 Array.prototype.splice() 更新 data 状态变量，并调用 onChange 回调函数传递任何选中的选项。
• 使用 Array.prototype.map() 将 data 状态变量映射到单独的 <input type="checkbox"> 元素。将每个元素包装在一个 <label> 中，将 onClick 处理程序绑定到 toggle 函数。

const MultiselectCheckbox = ({ options, onChange }) => {
  const [data, setData] = React.useState(options);

  const toggle = index => {
    const newData = [...data];
    newData.splice(index, 1, {
      label: data[index].label,
      checked: !data[index].checked
    });
    setData(newData);
    onChange(newData.filter(x => x.checked));
  };

  return (
    <>
      {data.map((item, index) => (
        <label key={item.label}>
          <input
            readOnly
            type="checkbox"
            checked={item.checked || false}
            onClick={() => toggle(index)}
          />
          {item.label}
        </label>
      ))}
    </>
  );
};

const options = [{ label: '选项一' }, { label: '选项二' }];

ReactDOM.createRoot(document.getElementById('root')).render(
  <MultiselectCheckbox
    options={options}
    onChange={data => {
      console.log(data);
    }}
  />
);