代码之家 › 专栏 › 技术社区 › DanMad

手动按键无法识别向下箭头

accessibility select reactjs javascript

DanMad · 技术社区 · 6 年前

我正在建造一个定制的,无障碍的 select up 和 down tab 密钥将在 选择 输入 option s。

我有一个 handleKeyPress 当按下其他键(例如 'Enter' 工作正常)。

下面是一个例子 选项

<li
  className="oc-select-field__item"
  tabIndex="0"
  onClick={handleClick}
  onKeyPress={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
  }
};

我做错了什么,而当 向下 是否按下箭头?

2 回复 | 直到 6 年前

wdm 6 年前

event.which 将为您提供键的数值。

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

尝试此工具: http://keycode.info

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

正如@devserkan提到的,您应该使用 onKeyDown 而不是 onKeyPress

这个 键盘按下 事件在按下某个键时触发。与keypress事件不同,keydown事件是为产生字符值的键触发的 对于不产生字符值的键。

devserkan 6 年前

对于箭头键,我想你需要 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>