如何在表单提交时获取react-select多选组件的选中值？

react-select的多选组件并非原生表单控件，默认不会自动在表单提交时携带选中值，要拿到预期的选中选项数组，有两种常用实现方式：

方式一：受控组件模式（推荐） #

通过value和onChange维护选中状态，提交时直接读取状态值即可。

import React, { useState } from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';

export default () => {
  // 初始化选中状态，对应默认选中项
  const [selectedColors, setSelectedColors] = useState([colourOptions[2], colourOptions[3]]);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 此处直接获取选中的完整选项数组
    console.log('选中的颜色选项：', selectedColors);
    // 可直接将selectedColors作为表单数据提交
  };

  return (
    <form onSubmit={handleSubmit}>
      <Select
        value={selectedColors}
        onChange={setSelectedColors}
        isMulti
        name="colors"
        options={colourOptions}
        className="basic-multi-select"
        classNamePrefix="select"
      />
      <button type="submit">提交表单</button>
    </form>
  );
};

• onChange回调会直接返回选中的完整选项对象数组，无需额外处理即可拿到你预期的结构。
• 受控模式能更精准地控制组件状态，适合大多数React项目场景。

方式二：绑定原生隐藏输入框 #

如果需要兼容原生表单提交逻辑（不依赖React状态管理），可以在选择变化时将选中值序列化存入隐藏input，表单提交时自动携带该值。

import React from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';

export default () => {
  const handleSelectChange = (selectedOptions) => {
    // 提取选项的value字段并序列化
    const selectedValues = selectedOptions.map(opt => opt.value).join(',');
    document.getElementById('hidden-colors').value = selectedValues;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 反序列化回数组格式
    const selectedColorValues = document.getElementById('hidden-colors').value.split(',');
    console.log('选中的颜色值：', selectedColorValues);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Select
        defaultValue={[colourOptions[2], colourOptions[3]]}
        onChange={handleSelectChange}
        isMulti
        name="colors"
        options={colourOptions}
        className="basic-multi-select"
        classNamePrefix="select"
      />
      <input type="hidden" id="hidden-colors" name="colors" />
      <button type="submit">提交表单</button>
    </form>
  );
};

额外提示 #

• 若仅需要选项的value或label，可通过map方法从选中数组中提取对应字段。
• 若使用Formik、React Hook Form等表单库，可使用官方适配的组件或自定义适配器，直接将react-select绑定到表单字段，简化状态管理。

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