ReactJS中如何获取动态生成复选框的表单提交选中值？

你的代码需要调整几处逻辑，同时补充提交处理逻辑，就能实现提交时获取选中的复选框值：

1. 修正复选框列表的渲染 #

Options是arr.map返回的元素数组，并非React组件，不能用<Options/>的方式渲染，应该直接用{Options}插入到JSX中。

2. 完善复选框的 onChange 处理函数 #

在handleCheckbox里，根据当前复选框的选中状态更新selected数组：

• 复选框选中时，将其value加入数组（做去重处理避免重复添加）
• 复选框取消选中时，从数组中移除对应的value

3. 添加表单提交处理 #

给表单绑定onSubmit事件，阻止默认的页面刷新行为，此时直接读取selected状态就能拿到所有选中项。

完整代码示例 #

import { useState } from 'react';

const arr = ['1', '2', '3', '4'];
 
function App() {
  // 存储用户提交表单时选中的项列表
  const [selected, setSelected] = useState([]);

  const handleCheckbox = (e) => {
    const { value, checked } = e.target;
    setSelected(prev => {
      if (checked) {
        // 选中时添加，用Set去重
        return [...new Set([...prev, value])];
      } else {
        // 取消选中时移除对应值
        return prev.filter(item => item !== value);
      }
    });
  }

  const Options = arr.map(item => {
    // 给每个复选框添加唯一key，满足React列表渲染要求
    return (
      <label key={item}>
        <input 
          type='checkbox' 
          value={item} 
          onChange={handleCheckbox}
          // 可选：同步复选框选中状态与selected数组，避免状态不一致
          checked={selected.includes(item)}
        />
        {item}
      </label>
    );
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // 此处即可获取所有选中的复选框值
    console.log('选中的项：', selected);
    // 后续可执行接口提交等业务逻辑
  }

  return (
    <form onSubmit={handleSubmit}>
      {Options}
      <button type="submit">Submit</button>
    </form>
  )
}

关键细节说明 #

• 给列表项加key：这是React列表渲染的强制要求，能保证组件更新的性能和正确性。
• checked属性：可选配置，用来让复选框的视觉状态和selected数组完全同步，避免操作后状态不一致。
• 阻止默认提交行为：如果不执行e.preventDefault()，页面会刷新，selected状态会丢失，无法获取选中值。

内容的提问来源于stack exchange，提问作者smzapp