ReactJS使用Typeahead实现自动提示时搜索功能失效，表单无法提交如何解决？

问题根因 #

你当前的问题是状态绑定逻辑不匹配导致的：

• 普通FormControl提交时依赖Keyword状态存储输入值，你也在FormControl的onChange事件中实时更新了这个状态
• 替换为Typeahead组件后，你只把组件的输入/选中值存到了singleSelections状态，完全没有同步到提交逻辑使用的Keyword，导致提交时Keyword始终为空，无法触发正常的搜索跳转

修复方案 #

你只需要修改Typeahead组件的事件绑定逻辑，把输入、选中的内容同步到Keyword状态即可，修改后的组件代码如下：

<Typeahead
  id="basic-typeahead-single"
  labelKey="name"
  onChange={(selected) => {
    setSingleSelections(selected);
    // 单选模式下选中的项在数组第一位，同步其名称到搜索关键词
    if (selected.length) {
      setKeyword(selected[0].name);
    } else {
      setKeyword("");
    }
  }}
  // 监听用户手动输入的内容，实时同步到搜索关键词
  onInputChange={(inputText) => setKeyword(inputText)}
  options={products}
  placeholder="Search for products"
  selected={singleSelections}
/>

可选优化 #

你原有提交逻辑里存在冗余错误，可同步修正：

const submitHandler = (e) => {
  e.preventDefault();
  if (Keyword) {
    history.push(`/?keyword=${Keyword}`);
  } else {
    // 原代码重复写了两次history.push，修正为直接跳转当前路径
    history.push(history.location.pathname);
  }
};

修改完成后，无论是选择下拉联想选项还是手动输入内容，点击提交按钮都能正常触发搜索跳转。

内容的提问来源于stack exchange，提问作者Sohanur Rahman Shanto 16209570