javascript - 如何在 react 中的 上设置 'onKeyPress' 处理程序？

Question

我熟悉 React 及其事件系统，但我似乎无法在 <canvas> 上触发 onKeyPress 事件。元素。事实上，我无法让它在 <div> 上启动任何一个。

这里是相关代码

class MyComponent extends React.Component {
    render() {
        return (
            <canvas onKeyPress={() => console.log('fired')} />
        )
    }
}

如果我更改 <canvas> 就可以正常工作成为<input> , 但不适用于 <div> .这是否意味着 React 根本不支持 canvas 元素上的 keyPress 事件？我忽略了什么？

Answer 1

只需将 tabIndex 分配给元素即可获得焦点。

<canvas tabIndex="0" onKeyPress={ () => console.log( 'fired' ) } />