时间戳

首页 > 解决方案 > 带有两个选项的搜索栏作为下拉菜单（ReactJS）

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

问题描述

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

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

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

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

搜索栏示例

标签： reactjsreact-hooksfrontenddropdown

解决方案

您需要 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>
)}

推荐阅读