(React / TypeScript) добавьте onKeyDownEventHandler в элемент canvas - PullRequest
Новая
       15

(React / TypeScript) добавьте onKeyDownEventHandler в элемент canvas

0 голосов
/ 23 марта 2020

Я хочу добавить onKeyDownEventHandler в свой элемент canvas, но это не go, структура редукса была правильно настроена, и я проверил response-redux DevTool, код не выполняет действие. Ниже приведен мой код:

redurs.ts 

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)}
  />
);

Кто-нибудь знает, как правильно внедрить onKeyDownEvent в мой холст? спасибо

1 Ответ

1 голос
/ 23 марта 2020

Поскольку в вашем случае React пытается захватить событие keydown элемента Canvas. Но элемент Canvas - это не тот элемент, на котором вы можете сосредоточиться (не говоря уже о том, чтобы печатать с ним в фокусе).

Вы можете попробовать следующее: 

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

TabIndex позволяет сосредоточиться на холст. Так как стало возможным захватить событие keydown. Надеюсь это поможет.

...