onKeyDown没有响应

Question

我使用Material-UI Table：

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

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

帮助？

Answer 1

这可能是因为您的表不可聚焦。因此，永远不会触发onKeyDown。

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

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

Answer 2

因此，Material-UI Table没有onKeyDown道具，但是它的docs却说：

  

提供的任何其他属性都将传播到根元素   （本机元素）。

假设“根元素”是table，那么您缺少的是一个tabIndex道具。

来自related SO post：

  

您需要将tabindex属性（例如tabindex="1"）设置为某个值，因此   它可以识别该表是键盘可选择的。那允许   要触发的键盘事件。