如何获取React中CreatableSelect组件的目标值？

React Select的CreatableSelect不是原生表单控件，没法像普通input那样用event.target直接拿到多选模式下的数组值，得用受控组件的方式来维护选中值：

• 用useState维护选中状态
  先在组件里引入useState，初始化一个状态变量存储选中的选项：

  import { useState } from 'react';
  import CreatableSelect from 'react-select/creatable';
  
  // 组件内部
  const [selectedProducts, setSelectedProducts] = useState([]);
  

• 给CreatableSelect绑定状态和 onChange 事件
  把状态变量传给组件的value属性，再通过onChange事件更新状态：

  <CreatableSelect
      className={Astyle.selectInput}
      isClearable
      isMulti
      options={productsData}
      id="company_products"
      required
      value={selectedProducts}
      onChange={(newValue) => setSelectedProducts(newValue)}
  />
  

• 提交表单时直接用状态变量
  表单提交时不用再通过event.target取值，直接用selectedProducts即可：

  const handleSubmit = (event) => {
      event.preventDefault();
      const data = {
          name: event.target.company_name.value,
          url: event.target.company_url.value,
          description: event.target.company_desc.value,
          tag: selectedProducts // 直接用状态里的数组值
      };
      // 这里处理表单提交逻辑，比如发送请求
  };
  

这样就能正确获取多选模式下的数组值，自定义创建的选项也会被包含在selectedProducts数组里。

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