React.js中如何处理多选选项的表单提交问题？

你的核心问题在于react-select开启isMulti模式后，onChange回调返回的不是DOM事件对象，而是选中的选项对象数组，所以原来的e.target.value写法完全不适用。下面是具体的修复步骤：

1. 修正多选选项的onChange处理函数 #

将handleRelatedEvents修改为直接接收选中的选项数组，根据后端需求选择存储格式：

const handleRelatedEvents = (selectedOptions) => {
  // 如果后端需要的是选中项的value集合（即MongoDB文档的_id数组）
  setRelatedEvent(selectedOptions.map(opt => opt.value));
  // 如果需要保留完整选项对象（比如后续渲染需要label），直接存数组：
  // setRelatedEvent(selectedOptions);
};

2. 同步Select组件的value属性 #

根据relatedEvent的存储格式，调整Select的value属性：

• 若存储的是value数组（_id集合）：

<Select
  options={relatedEventsData}
  value={relatedEventsData.filter(opt => relatedEvent.includes(opt.value))}
  isMulti
  onChange={handleRelatedEvents}
/>

• 若存储的是完整选项对象数组：

<Select
  options={relatedEventsData}
  value={relatedEvent}
  isMulti
  onChange={handleRelatedEvents}
/>

3. 优化：结合React-Hook-Form简化状态管理 #

你当前同时维护了自定义state和react-hook-form的表单状态，存在冗余。可以用useForm的setValue和watch统一管理：

// 移除自定义的info、analysis、relatedEvent state
const { register, handleSubmit, reset, setValue, watch, formState: { errors } } = useForm();
const info = watch("info");
const analysis = watch("analysis");
const relatedEvent = watch("relatedEvent");

// 多选回调直接同步到form state
const handleRelatedEvents = (selectedOptions) => {
  setValue("relatedEvent", selectedOptions.map(opt => opt.value));
};

// 提交时直接使用form数据
const onSubmit = async (data) => {
  setLoading(true);
  const MySwal = withReactContent(Swal);

  const eventData = {
    UUID: uuidv4(),
    ...data
  };

  // 后续axios请求逻辑不变
};

4. 修复代码遗漏 #

你使用了withReactContent(Swal)但未导入，需补充顶部导入：

import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';

修改后，多选选项的选中值即可正确同步并提交到后端。

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