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

IT技术 javascript events reactjs
2021-05-19 17:08:05

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

这是相关的代码

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

如果我将 更改为<canvas>，它可以正常<input>工作，但不适用于<div>. 这是否意味着 react 根本不支持画布元素上的 keyPress 事件？我在看什么？

2个回答

只需分配tabIndex给元素以获得焦点。

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

canvas.addEventListener('keydown', function(event) {
    alert('keydown');
        }, false);

检查您是否可以触发上述事件:)

其它你可能感兴趣的问题
上一篇如何在reactjs中更改材质ui徽章内容的字体大小？ 下一篇尝试导入错误：“默认”未从“../assertThisInitialized/_index.mjs”导出