react-select问题：无法在onBlur事件中获取选中值

react-select是封装后的组件，它的onBlur事件传递的原生事件对象无法直接获取选中值——因为内部DOM结构和原生input不同，e.target指向的不是存储选中值的元素。正确的做法是通过受控组件状态来维护和获取选中值：

步骤1：维护选中值的状态 #

用useState创建状态保存react-select的选中项：

import { useState } from 'react';
import Select from 'react-select';

// 根据你的选项结构定义类型，示例如下
type SelectOption = {
  value: string | number;
  label: string;
};

const YourFormComponent = () => {
  // 初始化选中值为null，对应未选择状态
  const [selectedOption, setSelectedOption] = useState<SelectOption | null>(null);

步骤2：修改事件处理逻辑 #

• 在onChange中更新选中状态，同时保留你原有的setValueOnChange逻辑
• 在onBlur中直接使用状态值，无需从事件对象中获取：

const handleBlur = () => {
    // 直接读取状态中的选中值
    const selectedValue = selectedOption ? selectedOption.value : '';
    console.log("value Select: ", selectedValue);
    
    // 这里添加表单验证逻辑，比如判断是否为空并设置错误信息
    if (!selectedValue) {
      // 示例：setError(`${name} is required`)
    }
  };

  const handleChange = (option: SelectOption | null) => {
    setSelectedOption(option);
    // 保留你原有的setValueOnChange逻辑
    setValueOnChange(option, name);
  };

步骤3：将状态绑定到Select组件 #

把selectedOption绑定到Select的value属性，让组件变成受控组件：

return (
    <Select
      placeholder={`Select ${name}`}
      name={name}
      id={id}
      onBlur={handleBlur}
      onChange={handleChange}
      options={options}
      styles={customStyle}
      value={selectedOption} // 绑定受控状态
    />
  );
};

额外说明 #

如果不想使用受控组件，也可以通过ref获取react-select实例读取值，但受控组件是React官方推荐的表单处理方式，逻辑更清晰且不易出错：

// 示例：使用ref获取值
const selectRef = useRef<Select>(null);

const handleBlur = () => {
  const selectedValue = selectRef.current?.getValue()?.value;
  console.log("value Select: ", selectedValue);
};

// 在组件中添加ref属性
<Select
  ref={selectRef}
  // 其他属性...
/>

内容的提问来源于stack exchange，提问作者Thibaud-S