带有两个选项的搜索栏作为下拉菜单（ReactJS）答案

【问题标题】：Search Bar with Two options as dropdown (ReactJS)带有两个选项的搜索栏作为下拉菜单（ReactJS）
【发布时间】：2023-03-26 00:50:01
【问题描述】：

假设我想在 ReactJS 中按照以下规范创建一个搜索栏（类似于 Github 的搜索栏）：

在用户开始输入时，会出现 2 个下拉选项。当用户点击该选项时，会做一些与之相关的事情。

我从 Material-UI 中找到了“自动完成”，并在 Google 上尝试了不同的网站，但我找不到我想要的答案，我找到的那些文章都是关于具有定义值的下拉菜单的。

有什么想法或参考吗？非常感谢！

【问题讨论】：

标签： reactjs react-hooks frontend dropdown

【解决方案1】：

您需要 1 个状态来保存输入值。然后基于它来渲染下面的下拉列表。您将需要一个带有可选搜索类型参数的提交处理程序，以便为下拉列表中每个选项的 onClick 事件重用。

const [keyword, setKeyword] = React.useState('')

const handleSearch = (searchType) => {
  if (searchType) {
    // search with type (Author or Book)
    doSearch({ keyword, type })
  } else {
    // search with keyword only
    doSearch({ keyword })
  }
}

用于渲染：

<input value={keyword} onChange={e => setKeyword(e.target.value)} />
<button onClick={() => handleSearch()}>Search</button>
// render the dropdown if value existed
{Boolean(keyword) && (
<div onClick={() => handleSearch('AUTHOR')}>{keyword} - Search in Author</div>
)}

【讨论】：

好兄弟！稍后我将提供有关此问题的更新
我看到在这种情况下，我无法使用向上/向下和回车键导航来选择选项，有什么建议吗？
如果你想支持键盘导航，你需要处理按键按下事件，然后使用switch(e.key)来决定你想用它做什么。例如：ArrowDown/Up 聚焦下一个/上一个选项或 Enter 提交具有所选类型的搜索关键字。