react-bootstrap-typeahead预填选中值时退格搜索异常问题

架构老林

2026-8-10

修复建议

手动维护输入值状态，分离选中状态与输入文本
react-bootstrap-typeahead在受控模式（使用selected）下，当存在预填选中项时，退格操作可能优先触发选中项的移除逻辑，而非输入文本的变化检测。你可以单独维护一个inputValue状态来控制输入框文本：

const [selected, setSelected] = useState(initialSelected);
const [inputValue, setInputValue] = useState(initialSelected?.[0]?.label || '');

// 同步选中项与输入值
useEffect(() => {
  if (selected.length > 0) {
    setInputValue(selected[0].label);
  } else {
    setInputValue('');
  }
}, [selected]);

// 处理输入变化，触发搜索
const handleInputChange = (newValue) => {
  setInputValue(newValue);
  // 这里调用你的搜索逻辑
  performSearch(newValue);
};

// 渲染Typeahead组件
<Typeahead
  selected={selected}
  onChange={setSelected}
  inputProps={{ value: inputValue }}
  onInputChange={handleInputChange}
  // 其他属性...
/>

两个同步的Typeahead都使用这套状态，确保输入文本和选中状态的同步逻辑完全由你控制，避免组件内部默认行为冲突。

强制触发搜索逻辑
不管组件内部状态如何，只要输入文本发生变化（包括退格操作），就直接调用搜索函数。在onInputChange回调中，无需判断是否有选中项，只要新输入值和之前不同，就执行搜索，确保退格时也能触发。
检查初始化时的状态同步
预填selected值时，确保组件挂载时输入框的文本值和选中项的显示文本完全一致。如果选中项的label和输入文本不匹配，组件内部的状态判断会出现异常，导致退格时不触发搜索。