如何在 React 中的 <canvas> 上设置“onKeyPress”处理程序？

Question

我熟悉 React 及其事件系统，但我似乎无法在元素上触发 onKeyPress 事件<canvas>。事实上，我也无法让它点火<div>。

这是相关代码

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

<canvas>如果我将 更改为 an ，则效果很好<input>，但不适用于<div>。这是否意味着 React 根本不支持画布元素上的 keyPress 事件？我在忽略什么？

Answer 1

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

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