我正在尝试在React中实现可键入的下拉组件。我设法实现了一个简单的下拉列表,该列表根据用户在下拉菜单文本框中键入的内容向用户显示结果,并且结果在键入时不断更新。
现在,我希望用户能够使用向上和向下箭头键浏览下拉结果。但是为此,我想我需要同时专注于两个要素?一个用于可输入文本框,以便用户可以继续键入,另一个用于搜索结果,以便用户可以使用键在它们之间导航? 我知道一次只能将重点放在一个元素上,那么我该如何实现呢?
作为我所要求的示例,请参见以下可键入下拉列表的快照:
如您所见,焦点位于此处的文本框上,但它似乎也位于突出显示的元素上,因此可以在其上使用上下键。我从react-select项目中拍摄了这张图片。您如何猜测他们实现了这一目标?
我的琐碎下拉列表代码当前如下所示:
let dropdownOptions = [];
for (let i = 0; i < searchResults.length; i++) {
dropdownOptions.push(
<div key={i} tabIndex={"0"}
onMouseDown={() => {
// code to set the dropdown's selected value when
// a dropdown option is clicked, then hide the dropdown
}}
onKeyPress={(e) => {
// this is where the code to navigate between
// results using arrow keys will go.
}}
>
{searchResults[i].value}
</div>);
}
这是<div>
的数组,其中包含下拉列表的搜索结果。这些div构成了在文本框中键入内容时向用户显示的选项。
那么,尝试将重点放在多个元素上是正确的方法吗?如果没有,我还能怎么做呢?