HandleKeyPress 无法识别向下箭头

Question

我正在使用 React.js 构建一个定制的、可访问的 select 输入。我需要使up 和down 箭头键功能，因为tab 键将在select 输入的options 范围内。

我在元素上有一个 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>