HandleKeyPress 无法识别向下箭头

Question

我正在select使用 React.js构建自定义的、可访问的输入。我需要让up和down箭头键tab在select输入的范围内发挥作用option。

我handleKeyPress在元素上有一个功能，可以检测何时按下其他键（例如'Enter'工作正常）。

这是一个例子option：

<li
  className="oc-select-field__item"
  tabIndex="0"
  onClick={handleClick}
  onKeyPress={handleKeyPress}
>

...这是handleKeyPress功能

handleKeyPress = event => {
  if (event.key === 40) {
    console.log('Down arrow key fired'); // does not fire
  }
  if (event.key === 'Enter') {
    console.log('Enter key fired'); // does fire
  }
};

down按下箭头时我没有成功检测到我做错了什么？

Answer 1

event.which 会给你键的数值。

event.key并且event.code会给你一个字符串值。

试试这个工具：http : //keycode.info

if (event.key === 'ArrowDown') {
    console.log('Down arrow key fired');
}

正如@devserkan提到你应该使用onKeyDown代替onKeyPress。

该KEYDOWN当按键被按下时触发事件。与 keypress 事件不同，keydown 事件是针对产生字符值的键和不产生字符值的键触发的。

Answer 2

对于箭头键，我认为你需要onKeyDown而不是onKeyPress.

class App extends React.Component {
  handleKeyPress = ( event ) => {
    if ( event.key === "ArrowDown" ) {
      console.log( "Down arrow key fired" ); // does not fire
    }
    if ( event.key === "Enter" ) {
      console.log( "Enter key fired" ); // does fire
    }
  };

  render() {
    return (
      <div>
        <ul>
          <li
            tabIndex="0"
            onClick={this.handleClick}
            onKeyDown={this.handleKeyPress}
          >Foo
          </li>
        </ul>
      </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>