Reactjs （React/TypeScript）将onKeyDownEventHandler添加到画布元素中

我想在canvas元素中添加一个onKeyDownEventHandler，但效果不好，redux结构设置正确，我选中了react-redux-DevTool，代码没有执行该操作。下面是我的代码：

异径管

export const canvasReducer = (state:ICanvasState = initialState, action:ICanvasActions):ICanvasState=>{
switch(action.type){
    case "CHANGE_DIRECTION":
        return{
            ...state,
            direction:action.d
        }
    default:
        return state;
}
}

Canvas.tsx

handleKeyDown = (e:React.KeyboardEvent<Element>)=>{
if(e.keyCode === 37){
  this.props.changeDirection(Directions.LEFT)
}
if(e.keyCode === 38){
  this.props.changeDirection(Directions.UP)
}
if(e.keyCode === 39){
  this.props.changeDirection(Directions.RIGHT)
}
if(e.keyCode === 40){
  this.props.changeDirection(Directions.DOWN)
}
}
render() {
return (
  <canvas
  ref={this._canvasRef}
  width={26*25}
  height={26*25}
  onKeyDown={(e)=>this.handleKeyDown(e)}
  />
);

handleKeyDown=（e:React.KeyboardEvent）=>{
如果（例如keyCode===37）{
此.props.changeDirection（方向.左）
}
如果（例如keyCode===38）{
此.props.changeDirection（方向.向上）
}
如果（例如keyCode===39）{
此.props.changeDirection（Directions.RIGHT）
}
如果（例如keyCode===40）{
这个。道具。改变方向（方向。向下）
}
}
render（）{
返回(
这个.handleKeyDown（e）}
/>
);

---

有人知道如何在我的画布中正确实现onKeyDownEvent吗？谢谢

，因为在您的例子中，React正在尝试捕获Canvas元素的keydown事件。但Canvas元素不是您可以关注的元素（更不用说在焦点上键入了）

您可以尝试以下操作：

render() {
  return (
    <canvas
      ref={this._canvasRef}
      width={26*25}
      height={26*25}
      onKeyDown={(e)=>this.handleKeyDown(e)}
      tabIndex={0}
    />
  );
}

render（）{
返回(
这个.handleKeyDown（e）}
tabIndex={0}
/>
);
}

---

tabIndex允许您关注画布。因为这样就可以捕获按键事件。希望这有帮助

因为在您的例子中，React试图捕获Canvas元素的keydown事件。但Canvas元素不是您可以关注的元素（更不用说在焦点上键入了）

您可以尝试以下操作：

render() {
  return (
    <canvas
      ref={this._canvasRef}
      width={26*25}
      height={26*25}
      onKeyDown={(e)=>this.handleKeyDown(e)}
      tabIndex={0}
    />
  );
}

render（）{
返回(
这个.handleKeyDown（e）}
tabIndex={0}
/>
);
}

tabIndex允许您关注画布。因为这样就可以捕获按键事件。希望这有帮助