reactstrap，带有搜索输入的下拉菜单

Question

为了有利于 reactstrap 下拉菜单的设计，我想将其用作搜索栏，结果显示在下拉菜单中。但是默认的按键侦听器可以通过键盘（箭头键Up/Down）在结果中导航，仅由输入捕获，并且无法将其传播到父级或任何在结果可见时正在侦听按键事件的东西。

<Dropdown toggle={() => setIsOpen(!isOpen)} isOpen={isOpen}>
  <DropdownToggle>
    <Input onChange={(e) => setQuery(e.target.value)} placeholder="search placeholder" />
  </DropdownToggle>
  <DropdownMenu>
    {fetchedItems.map((item) => (
      <div key={item}>
        <DropdownItem>action #1</DropdownItem>
        <DropdownItem>action #1</DropdownItem>
        <DropdownItem text>Dropdown Item Text</DropdownItem>
        <DropdownItem disabled>Action (disabled)</DropdownItem>
        <DropdownItem divider />
      </div>
    ))}
  </DropdownMenu>
</Dropdown>

现在查看 this sandbox 我正在寻找两种方法，要么将关键事件侦听器添加到默认的默认下拉行为中，要么自定义 <Input type=" search"/>

现在的问题是如何去做。我认为处理关键侦听器可能会更好。

Answer 1

一种方法是添加带有下拉组件的 eventListener。

您还希望维护一个跟踪当前导航下拉项索引的状态。

eventListener 可以递增和递减选定的索引

如果未选择任何内容，向上键设置 0 和向下键设置 length - 1 作为当前索引
现在根据不同的击键递增或递减
如果搜索到新内容，请在方便时将其更改为未定义或 0
为当前导航的索引提供自定义样式

Answer 2

请遵循以下事项：

1)上面的“事件监听器”应该是parent列表的一部分。 2) 获得新数据集后，将“current-index”的值设置为 0。 3) 当用户根据“key-value”使用箭头按钮“incsease”和“decrease”移动选择时。 4）如果使用从一个点跳转到另一个点得到“id”或“序列号”。 5) 如果在 children.

上使用，理想的事件监听器应该是“onfoucs”

Answer 3

整个问题出在某种类型的事件侦听器上，因此 DropDownToggle 组件接收 onKeyDown 事件而不是 onKeyPress

<DropdownToggle onKeyDown={(e) => {/* now have access to e.key */} }

reactstrap，带有搜索输入的下拉菜单

reactstrap, dropdown with search input

reactjs

reactstrap

react-tsx

bootstrap-5