React-Bootstrap-Typeahead如何在onChange选中菜单时手动设置自定义显示值？

你直接修改DOM值无效的核心原因是React-Bootstrap-Typeahead内部维护了输入框的状态，直接操作DOM的修改会被组件后续的渲染逻辑覆盖，所以会出现值闪一下就回退的情况。

方案1（适用v5及以上版本） #

用组件公开暴露的setInputValue方法修改输入值，同时把操作放到setTimeout中延迟执行，避开组件内部选中逻辑的更新时序：

onChange={option => {
  // 此处保留你原有的业务逻辑
  setTimeout(() => {
    // 调用官方API修改输入值，会同步更新组件内部状态
    typeaheadRef.current.setInputValue('abc');
    typeaheadRef.current.blur();
  }, 0);
}}

方案2（适用v4及以下旧版本） #

先调用clear()清空组件内部的选中状态，再修改输入值：

onChange={option => {
  // 此处保留你原有的业务逻辑
  setTimeout(() => {
    typeaheadRef.current.clear();
    typeaheadRef.current.inputNode.value = 'abc';
    typeaheadRef.current.blur();
  }, 0);
}}

适配Formik的注意事项 #

因为你使用的是defaultSelected的非受控模式，修改输入值后如果需要同步到Formik状态，直接在setTimeout回调中调用Formik的setFieldValue方法即可，不会和现有逻辑产生冲突。

内容的提问来源于stack exchange，提问作者gene b.