Я нахожусь в процессе создания настраиваемого и доступного ввода 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?

3
DanMad 15 Сен 2018 в 01:24

2 ответа

Лучший ответ

event.which даст вам числовое значение ключа.

event.key и event.code дадут вам строковое значение.

Попробуйте этот инструмент: http://keycode.info

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

Как упоминал @devserkan, вам следует использовать onKeyDown вместо onKeyPress.

Событие keydown запускается при нажатии клавиши. В отличие от события нажатия клавиши, событие нажатия клавиши запускается для клавиш, которые производят символьное значение , и для клавиш, которые не производят символьное значение.

2
wdm 14 Сен 2018 в 22:46

Для клавиш со стрелками, я думаю, вам понадобится 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>
1
devserkan 14 Сен 2018 в 22:40