Question

我有一张桌子，我想将箭头键附加到每个单元格上，以便在反应中实现类似https://jsfiddle.net/rh5aoxsL/的功能，但由于某些地方出了错，任何人都可以知道该怎么做，因此无法这样做 >

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;

感谢您的帮助

Answer 1

我不知道此代码是否足以满足您的需要，但正如@Pardeep Dhingra在评论中所解释的那样，您需要onKeyDown而不是onKeyPress。另外，您应该更改回调函数。我已经使用tabIndex开始了第一步。

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>

Answer 2

这是我的代码，只有兄弟姐妹。

常量：

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

我有tr-> td-> div->输入，我的重点是输入。（这就是为什么我有一些parentElement和childNodes的原因。

TOTAL_CELLS_BY_ROW是我的列数...

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

当然，每个输入中有onKeyDown={this.onKeyDown}。

如何在React JS中的表单元格上附加按键事件

2 个答案: