react绑定多选checkbox的值

在 React 中，要绑定多选 checkbox 的值，你可以使用一个状态来追踪选择的值。通常，你会使用数组来存储选中的复选框的值。以下是一个基本的示例：

import React, { useState } from 'react';

function CheckboxGroup() {
  // 初始化状态，用于存储选中的值
  const [selectedValues, setSelectedValues] = useState([]);

  // 处理复选框状态变化的函数
  const handleCheckboxChange = (event) => {
    const value = event.target.value;
    const isChecked = event.target.checked;

    // 根据是否选中来更新状态
    if (isChecked) {
      setSelectedValues([...selectedValues, value]);
    } else {
      setSelectedValues(selectedValues.filter((val) => val !== value));
    }
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          value="option1"
          checked={selectedValues.includes('option1')}
          onChange={handleCheckboxChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="checkbox"
          value="option2"
          checked={selectedValues.includes('option2')}
          onChange={handleCheckboxChange}
        />
        Option 2
      </label>
      <label>
        <input
          type="checkbox"
          value="option3"
          checked={selectedValues.includes('option3')}
          onChange={handleCheckboxChange}
        />
        Option 3
      </label>

      <p>Selected values: {selectedValues.join(', ')}</p>
    </div>
  );
}

export default CheckboxGroup;

在这个例子中，我们使用 useState 来创建一个状态变量 selectedValues，用于存储选中的值。然后，对每个复选框都应用了 onChange 事件处理函数 handleCheckboxChange。在这个函数中，我们根据复选框是否被选中来更新状态。通过 checked 属性来确定复选框的选中状态，然后使用数组的 includes 方法来检查值是否已经存在于 selectedValues 数组中，最后使用 setSelectedValues 更新状态。