react-select的onBlur函数返回undefined、无法获取选中值问题求助

问题根因 #

• 你代码里Select组件的value属性绑定错误：options是选项数组，不存在label属性，导致组件选中状态没有正确受控，选中值无法正常同步。
• react-select的onBlur回调的入参本身就是焦点事件对象，不是当前选中值，你从这个入参里当然拿不到选中的选项值。

解决方案 #

1. 修正Select组件的value绑定，关联你声明的value状态变量，确保组件受控。
2. onBlur触发时直接读取你已经用useState存的选中值即可，不需要从onBlur的入参里拿。

修正后可正常运行的代码如下：

import React, { useState } from "react";
import Select from "react-select";
import "./styles.css";

export default function App() {
  const [value, setValue] = useState();
  const options = [
    {
      label: "first option",
      value: 1
    },
    {
      label: "second option",
      value: 2
    },
    {
      label: "third option",
      value: 3
    }
  ];

  const onSelect = (value) => {
    setValue(value);
  };
  const onBlurValue = () => {
    // 直接读取存在state里的选中值即可
    console.log(value);
  };

  return (
    <div>
      <Select
        value={value}
        options={options}
        onChange={onSelect}
        blurInputOnSelect
        onBlur={onBlurValue}
      />
    </div>
  );
}

如果有特殊场景不能用状态取值，也可以给Select组件绑定ref，调用ref.current.getValue()获取当前选中值。

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