title: (React/TypeScript) add onKeyDownEventHandler into a canvas element
body: <p>I want to add a onKeyDownEventHandler into my canvas element, but it didn't go well, the redux structure has been correctly set and I checked react-redux DevTool the code doesn't execute the action. Below is my code:</p>
  
  <p>reducers.ts</p>
  
  <pre><code>export const canvasReducer = (state:ICanvasState = initialState, action:ICanvasActions):ICanvasState=&gt;{
  switch(action.type){
      case "CHANGE_DIRECTION":
          return{
              ...state,
              direction:action.d
          }
      default:
          return state;
  }
  }
  </code></pre>
  
  <p>Canvas.tsx</p>
  
  <pre><code>handleKeyDown = (e:React.KeyboardEvent&lt;Element&gt;)=&gt;{
  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 (
    &lt;canvas
    ref={this._canvasRef}
    width={26*25}
    height={26*25}
    onKeyDown={(e)=&gt;this.handleKeyDown(e)}
    /&gt;
  );
  </code></pre>
  
  <p>Anyone have clue how to implement the onKeyDownEvent into my canvas correctly? thanks</p>