带有两个选项作为下拉菜单的搜索栏（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>
)}