onKeyDown没有在组件上触发

Question

我有以下组件

<ul id='list-view' style={this.props.style} onKeyDown={this.__matchEvent}>
    {listItems}
    {status}
</ul>

但onKeyDown事件根本没有触发，我做错了吗？

Answer 1

要触发onKeyDown事件，您的元素必须被聚焦，或者包含在按下某个键时具有焦点的元素。如果您将<ul>切换为<textarea>，您会看到按键事件触发。

不幸的是，没有办法专注于<ul>元素。您最好的选择是在文档上附加一个按键侦听器以捕获所有按键事件，并查看目标是什么（它只是一个可以有焦点的元素，或者是body）。

Answer 2

完成@ anders-ekdahl的答案。

您可以使用contentEditable属性来制作一些标记来触发键盘事件

<div contentEditable 
     onKeyDown={this.handleKeyDown}>blablabla</div>

Answer 3

跟进Liubomyr Mykhalchenko：

将焦点功能添加到默认情况下不接收焦点的html元素（ul，li，div，...）的另一种方法是添加tabIndex属性。

有两种方法可以使用它：

tabIndex =“n” （n为正数）

通过添加大于0的特定数字，您可以更改页面上元素的标签顺序。

但不鼓励这样做，它可以有great impact on accessibility。

的的tabIndex = “0”

这使得一个元素（以前无法聚焦）成为可聚焦的可能性。所以你的ul元素将能够获得焦点。

但是你应该知道键盘用户可能想要与这个“哑”元素交互，所以你需要为这个元素添加键盘监听器和动作（甚至是焦点/悬停状态）。

你现在正进入a11y的精彩世界： - ）