onKeyDown 没有响应

Question

使用 Material-UI Table 我有这个：

<Table
 onKeyDown={event => console.log(event)}>
  <TableBody>
    ...
  </TableBody>
</Table>

当我用鼠标单击 table 然后开始单击向上和向下箭头键时，控制台中没有任何记录。我已经尝试将 onKeyDown 放在 TableBody 以及我的应用程序的整个父级 div 上，但没有任何运气。

帮助？

Answer 1

这可能是因为您的 table 无法聚焦。所以永远不会触发 onKeyDown。

您可以添加 tabIndex 使其可聚焦，但请确保您内部没有其他可聚焦元素，否则它们将优先。

<Table
 tabIndex='123'
 onKeyDown={event => console.log(event)}>
  <TableBody>
    ...
  </TableBody>
</Table>

Answer 2

所以，Material-UI Table 没有 onKeyDown 属性，但是，它的 docs 确实说：

Any other properties supplied will be spread to the root element (native element).

假设 "root element" 是 table，那么您缺少的是 tabIndex 道具。

来自 related SO post:

You need to set tabindex property (eg tabindex="1") to some value, so it can identify that this table is keyboard selectable. That allows the keyboard event to be triggered.

onKeyDown 没有响应

onKeyDown is non responsive

javascript

keyboard

html-table

reactjs

material-ui