react多选框双向数据绑定

在 React 中实现多选框的双向数据绑定可以通过以下步骤：

1. 定义一个状态变量来存储多选框选中的值，例如：

const [selectedValues, setSelectedValues] = useState([]);

2. 在多选框的 onChange 事件中更新状态变量的值，例如：

<input type="checkbox" value="value1" onChange={(e) => {
  if (e.target.checked) {
    setSelectedValues([...selectedValues, e.target.value]);
  } else {
    setSelectedValues(selectedValues.filter(value => value !== e.target.value));
  }
}}/>

3. 将状态变量的值传递给多选框的 checked 属性，例如：

<input type="checkbox" value="value1" checked={selectedValues.includes("value1")} onChange={(e) => {
  if (e.target.checked) {
    setSelectedValues([...selectedValues, e.target.value]);
  } else {
    setSelectedValues(selectedValues.filter(value => value !== e.target.value));
  }
}}/>

这样就可以实现多选框的双向数据绑定了。