如何读取ReactSelect搜索框输入内容且未选下拉选项时保留输入值

核心实现逻辑 #

两个需求都可以通过ReactSelect的内置受控属性实现，不需要额外自定义组件：

• 读取任意输入内容：通过inputValue受控属性绑定组件state，随时可以直接读取state值拿到用户输入的所有内容，和是否选中下拉选项无关
• 输入内容保留不被清空：只要inputValue受控，输入框内容完全由你的state控制，会覆盖ReactSelect默认失焦/关闭菜单自动清空输入的逻辑

完整可运行示例 #

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

// 下拉选项示例
const optionList = [
  { value: 'beijing', label: '北京' },
  { value: 'shanghai', label: '上海' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' },
];

export default function ReactSelectDemo() {
  // 存储选中的下拉选项
  const [selected, setSelected] = useState(null);
  // 存储搜索框输入内容，直接读取这个state就能拿到用户输入的任意内容
  const [searchInput, setSearchInput] = useState('');

  // 输入内容变化回调
  const onInputUpdate = (newVal, action) => {
    // 仅用户主动输入时更新输入内容，避免选中选项时输入被覆盖为选中项的label
    if (action.action === 'input-change') {
      setSearchInput(newVal);
    }
    // 如果需要选中选项后输入框显示选中项的label，去掉上面的判断直接更新即可
  };

  // 选中选项回调
  const onOptionSelect = (option) => {
    setSelected(option);
    // 如果需要选中后清空输入框，在这里加 setSearchInput('') 即可
  };

  return (
    <Select
      value={selected}
      onChange={onOptionSelect}
      // 绑定输入框内容为受控状态
      inputValue={searchInput}
      onInputChange={onInputUpdate}
      options={optionList}
      isSearchable
      // 可选配置：选中选项后不收起下拉、不失焦输入框
      closeMenuOnSelect={false}
      blurInputOnSelect={false}
    />
  );
}

扩展说明 #

如果需要支持用户输入自定义内容作为选项，不需要从预设下拉列表选择，只需将导入的Select替换为CreatableSelect即可，其余逻辑无需修改：

// 替换导入语句
import CreatableSelect from 'react-select/creatable';

内容的提问来源于stack exchange，提问作者GURUDAS K S