如何设置Ant Design Select组件失焦后不清除已输入的搜索内容

实现方法 #

要让Select组件失焦时保留已输入的搜索值，你只需要将搜索输入框改为受控模式，自行维护搜索值的状态即可，核心用到inputValue和onSearch两个属性。

示例代码 #

import { useState } from 'react';
import { Select } from 'antd';

// 你的业务组件
const Demo = () => {
  // 存储搜索框输入的内容
  const [inputSearchVal, setInputSearchVal] = useState('');

  return (
    <Select
      style={{ width: "240px" }}
      placeholder="Search..."
      showSearch={true}
      // 绑定受控的输入值
      inputValue={inputSearchVal}
      // 输入内容变化时同步更新状态
      onSearch={(val) => setInputSearchVal(val)}
      // 可选配置：选中选项后清空搜索框，不需要可以删除该行
      // onSelect={() => setInputSearchVal('')}
    >
      {/* 此处替换为你的Option选项 */}
      <Select.Option value="jack">Jack</Select.Option>
      <Select.Option value="lucy">Lucy</Select.Option>
      <Select.Option value="tom">Tom</Select.Option>
    </Select>
  )
}

原理解释 #

默认情况下Select的搜索输入值是组件内部维护的，失焦时内部逻辑会自动清空该值。当你显式传入inputValue属性后，输入框就转为受控模式，显示内容完全由你传入的状态决定，组件内部不会再主动修改它，就实现了失焦保留搜索值的效果。

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