<li> 上的 onKeyDown 事件反应

Question

我有自动完成类 (https://www.digitalocean.com/community/tutorials/react-react-autocomplete)，其中包含用于“li”组件中的搜索和建议列表的输入片段。我想在建议中添加监听器（onKeyDown）。就像用户在建议上按回车一样，它会出现在输入字段中。正在工作的是 onClick 处理程序，所以我想调用相同的函数。但 OnkeyDown 没有记录任何内容。

有什么想法吗？我在想，也许是焦点问题？即使我使用箭头在建议列表中向下滚动，我也可以看到输入已激活 cofus。所以它只在输入字段上监听？怎么办？

  suggestionsListComponent = (
            <ul className="suggestions" > {
                    filteredSuggestions.map((suggestion, index) => {
                        let className;

                        // Flag the active suggestion with a class
                        if (index === activeSuggestion) {
                            className = "suggestion-active";
                        }

                        return (<li className={className}
                            key={suggestion}
                            onClick={onClick }
                            onKeyDown={onkeyDownSuggestions }
                        > {suggestion} </li>
                        );
                    })
                } </ul>
            );


 <Fragment>
        <input
            type="text"
            onChange={onChange}
            onKeyDown={onKeyDown}
            value={userInput}
            id="searchBar"
        />
        {suggestionsListComponent}
    </Fragment>

Answer 1

给你的 li 元素一个 tabIndex={0} 属性，这样它就可以被聚焦。然后它将捕获 keyPress 事件。但这不会使它可以用向下箭头键聚焦。您可以使用 Tab 键进行对焦。如果你想用箭头键聚焦，你可能需要手动使用focus()。然后你需要tabIndex={-1}