how to attach key press event on table cell in react js

Question

i have a table i wanna attach arrow keys to each cell wanna implement something like https://jsfiddle.net/rh5aoxsL/ in react but then not able to do so as some where m going wrong can anyone lemme know what has to be done

import React, { Component } from 'react';
 import './App.css';
 class App extends Component {
   constructor(props){
super(props);
this.escFunction = this.escFunction.bind(this);
   }
   escFunction(event){
   if(event.keyCode === 37) {
    console.log("----------37---------------");
    }
    if(event.keyCode === 38) {
   console.log("----------38---------------");
    }
    if(event.keyCode === 39) {
    console.log("----------39---------------");
    }
    if(event.keyCode === 40) {
    console.log("----------40---------------");
    }
    }
 componentDidMount(){
document.addEventListener("keydown", this.escFunction, false);
 }
  componentWillUnmount(){
   document.removeEventListener("keydown", this.escFunction, false);
 }
 render() {
   return (  
    <div className="App">      
    <table >
     <tbody>
      <tr>
       <td id="start" onKeyDown={this.escFunction}>1</td>
        <td onKeyDown={this.escFunction}>2</td>
      </tr>
      <tr>
        <td onKeyDown={this.escFunction}>3</td>
        <td onKeyDown={this.escFunction}>4</td>
      </tr>
      </tbody>
    </table>
    </div>
    );
   }
  }

 export default App;

any help is appreciated

Answer 1

This is my code, just getting siblings.

Constants:

const UP_ARROW = 38;
const DOWN_ARROW = 40;
const LEFT_ARROW = 37;
const RIGHT_ARROW=39;
const TOTAL_CELLS_BY_ROW = (your_number_of_cols);

I have tr -> td -> div -> input, my focus is in inputs. (this is why i have some parentElement and childNodes.

TOTAL_CELLS_BY_ROW is my col count...

   onKeyDown = (e) => {
        var idx = e.target.parentElement.parentElement.cellIndex;

        if (e.keyCode === LEFT_ARROW) {
            if (e.target.parentElement.parentElement.previousElementSibling) {
                e.target.parentElement.parentElement.previousElementSibling.childNodes[0].childNodes[0].focus();
            }
        }

        if (e.keyCode === RIGHT_ARROW) {
            if (e.target.parentElement.parentElement.nextElementSibling) {
                e.target.parentElement.parentElement.nextElementSibling.childNodes[0].childNodes[0].focus();
            }
        }

        if (e.keyCode === DOWN_ARROW) {
            const nextRow = e.target.parentElement.parentElement.parentElement.nextElementSibling
            if (nextRow) {
                nextRow.childNodes[idx%TOTAL_CELLS_BY_ROW].childNodes[0].childNodes[0].focus();
            }
        }

        if (e.keyCode === UP_ARROW) {
            const previousRow = e.target.parentElement.parentElement.parentElement.previousElementSibling
            if (previousRow) {
                previousRow.childNodes[idx%TOTAL_CELLS_BY_ROW].childNodes[0].childNodes[0].focus();
            }
        }
    }

Of course onKeyDown={this.onKeyDown} in each input.

Answer 2

I don't know this code is enough for you but as @Pardeep Dhingra explained in the comments you need onKeyDown instead of onKeyPress in your situation. Also, you should change your callback function. I've used tabIndex to start the initial move.

class App extends React.Component {
  escFunction = ( event ) => {
    if ( event.keyCode === 37 ) {
      console.log( "----------37---------------" );
    }
    if ( event.keyCode === 38 ) {
      console.log( "----------38---------------" );
    }
    if ( event.keyCode === 39 ) {
      console.log( "----------39---------------" );
    }
    if ( event.keyCode === 40 ) {
      console.log( "----------40---------------" );
    }
  }

  render() {
    return (
      <div className="App">
        <table>
          <tbody>
            <tr>
              <td id="start" tabIndex="0" onKeyDown={this.escFunction}>
                1
              </td>
              <td onKeyDown={this.escFunction}>2</td>
            </tr>
            <tr>
              <td onKeyDown={this.escFunction}>3</td>
              <td onKeyDown={this.escFunction}>4</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>