如何同步两个react-bootstrap-typeahead输入框的内容？

问题根源在于你使用了defaultInputValue这个非受控属性，它仅在组件首次挂载时生效。一旦用户与输入框交互，组件会自行维护内部状态，后续外部状态的变更无法同步到输入框。要实现跨页面的输入值同步，必须将AsyncTypeahead改为受控组件，直接绑定Redux中的状态值。

具体实现步骤 #

1. 确保Redux状态管理正确 #

你的Redux需要维护全局的搜索值状态，并提供更新该状态的action：

// actions.js
export const UPDATE_SEARCH_VALUE = 'UPDATE_SEARCH_VALUE';
export const updateSearchValue = (value) => ({
  type: UPDATE_SEARCH_VALUE,
  payload: value
});

// reducer.js
const initialState = {
  currentSearchValue: ''
};

export const searchReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_SEARCH_VALUE:
      return { ...state, currentSearchValue: action.payload };
    default:
      return state;
  }
};

2. 将AsyncTypeahead改为受控组件 #

替换defaultInputValue为inputValue，直接绑定Redux中的currentSearchValue，同时通过onChange（选择选项时）和onInputChange（输入内容变化时）同步更新Redux状态：

import { AsyncTypeahead } from 'react-bootstrap-typeahead';
import { useSelector, useDispatch } from 'react-redux';
import { updateSearchValue } from './actions';

// 可复用的搜索组件，仪表盘和主页都用这个
const MapSearchInput = () => {
  const currentSearchValue = useSelector(state => state.search.currentSearchValue);
  const dispatch = useDispatch();

  // 你的异步搜索逻辑
  const handleSearch = async (query) => {
    // 示例：请求地图搜索接口
    // const results = await fetchMapSearchResults(query);
    // return results;
  };

  // 用户选择搜索结果时更新全局状态
  const handleSelectionChange = (selectedItems) => {
    if (selectedItems.length) {
      // 根据你的数据结构调整，比如取label或name字段
      dispatch(updateSearchValue(selectedItems[0].label));
    }
  };

  // 可选：用户手动输入时同步更新全局状态（如果需要实时同步输入内容）
  const handleInputChange = (inputValue) => {
    dispatch(updateSearchValue(inputValue));
  };

  return (
    <AsyncTypeahead
      inputValue={currentSearchValue} // 受控绑定全局状态
      onSearch={handleSearch}
      onChange={handleSelectionChange}
      onInputChange={handleInputChange} // 可选，按需启用
      // 你的其他配置项（比如placeholder、isLoading等）
    />
  );
};

// 仪表盘页面使用
const Dashboard = () => {
  return (
    <div>
      <MapSearchInput />
      {/* 其他仪表盘内容 */}
    </div>
  );
};

// 主页头部使用
const HomeHeader = () => {
  return (
    <header>
      <MapSearchInput />
      {/* 其他头部内容 */}
    </header>
  );
};

3. 清除搜索的逻辑 #

点击清除按钮时，只需调用updateSearchValue('')即可清空全局状态，两个输入框会自动同步清空：

const ClearSearchButton = () => {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(updateSearchValue(''))}>
      清除搜索
    </button>
  );
};

为什么这个方案可行 #

• 受控模式下，输入框的值完全由Redux全局状态驱动，无论在哪个页面修改状态，另一个页面的输入框都会实时同步最新值。
• 避免了非受控组件的内部状态与外部状态脱节的问题，彻底解决你遇到的"首次生效后续失效"的问题。
• 复用MapSearchInput组件可以减少代码冗余，确保两个输入框的逻辑完全一致。

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