React中如何将多选select的选中值存入state数组

原生多选下拉框触发onChange时，e.target.value不会自动返回所有选中项的集合，只会返回当前点击的单个选项值，原有直接赋值的写法无法收集多个选中的成员ID，因此只能存入最后一次点击的单个选项。

• 首先给<select>标签添加multiple属性，开启原生多选能力，支持按住Ctrl/Cmd点选累加选项
• 针对teamMembers这类多选字段，单独遍历select下的所有option节点，筛选出选中状态的选项后提取value组成数组，再更新到state中；普通文本输入字段（title、description）保留原有赋值逻辑即可

// 表单onChange统一处理函数
const handleFormChange = (e) => {
  const fieldName = e.target.name;
  // 多选团队成员字段特殊处理
  if (fieldName === 'teamMembers') {
    // 收集所有选中的成员ID
    const selectedMemberIds = Array.from(e.target.options)
      .filter(option => option.selected)
      .map(option => option.value);
    setProjectDetails(prevState => ({
      ...prevState,
      [fieldName]: selectedMemberIds
    }));
    return;
  }
  // 普通输入字段走原有逻辑
  setProjectDetails(prevState => ({
    ...prevState,
    [fieldName]: e.target.value
  }));
};

// 对应初始state结构，和后端MongoDB字段直接对齐
const initialProjectDetails = {
  title: "",
  description: "",
  teamMembers: [],
};

• 渲染select选项时，需将每个option的value绑定为对应用户的MongoDB ObjectId字符串，最终收集到的teamMembers数组可以直接提交给后端，无需额外格式转换
• 如果使用Ant Design、MUI等第三方UI库的Select组件，组件本身的onChange回调会直接返回选中值构成的数组，不需要手动遍历option节点，直接将回调返回值赋值给对应state字段即可
• 初始state中必须给teamMembers设置空数组[]作为默认值，避免首次渲染、提交时出现类型错误

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