带有两个选项的搜索栏作为下拉列表（ReactJS）

Question

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

在用户开始输入时的输入中，将出现 2 个选项作为下拉列表。当用户单击该选项时，将执行与之相关的操作。

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

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

Answer 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>
)}

带有两个选项的搜索栏作为下拉列表（ReactJS）

Search Bar with Two options as dropdown (ReactJS)

frontend

reactjs

dropdown

react-hooks