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

【问题标题】：reactstrap, dropdown with search inputreactstrap，带有搜索输入的下拉菜单
【发布时间】：2022-01-01 02:47:16
【问题描述】：

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

<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"/>

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

【问题讨论】：

你的DropdownItem 会被硬编码吗？如果这些选项来自 fetchedItems，您不能只过滤 fetchedItems 中的值吗？
@Stoobish 有什么区别？无论值是什么，箭头键都无法导航下拉项目。检查沙箱，有三个示例，其中带有Inputcomponent 的示例不起作用
哦，明白了，误解了你的问题。您希望可搜索的下拉菜单允许通过箭头键进行导航。

标签： reactjs bootstrap-5 reactstrap react-tsx

【解决方案1】：

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

您还需要维护一个状态，以跟踪当前导航的下拉项的索引。

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

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

【讨论】：

嗨，这就是我已经尝试过并在问题中提到的，下拉组件（DropDown、DropDownMenu、DropDownItem）上的 eventListener 不接收任何键盘事件。如果您可以从提供的沙盒中扩展您的答案，那就太好了:)

【解决方案2】：

请遵循以下事项：

1) 上面的“事件监听器”应该是列表父级的一部分。 2）一旦获得新的数据集，将“current-index”的值设置为0。 3）当用户根据“键值”使用箭头按钮“增加”和“减少”一次移动选择时。 4）如果使用从一个点跳转到另一个点得到“id”或“序列号”。 5) 如果在孩子上使用理想的事件监听器应该是“onfoucs”。

【讨论】：

【解决方案3】：

整个问题出在一种事件监听器上，所以DropDownToggle 组件接收到onKeyDown 事件而不是onKeyPress

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

【讨论】：