Question

我正在使用React.js构建定制的，可访问的select输入。我需要使up和down箭头键起作用，因为tab键将在select输入的option s范围内。

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

HandleKeyPress无法识别向下箭头

2 个答案: