реагировать на клик по коду ключа не определено?

Question

Я знаю, что с помощью keypress или keyDown я могу проверить, какая клавиша нажата, но с помощью onClick я не могу этого сделать.

class App extends React.Component {
  handleClick = e => {
    console.log(e.keyCode);
  };
  render() {
    return <h1 onClick={this.handleClick}>Hello CodeSandbox</h1>;
  }
}

https://codesandbox.io/s/ovwn9z6owz

В чем здесь проблема?

Answer 1

код клавиши предназначен для KeyboardEvent, а не щелчков мышью и в любом случае считается устаревшим.
Из события клавиатуры. Код ключа MDN :

Эта функциябольше не рекомендуется.Хотя некоторые браузеры могут по-прежнему поддерживать его, он, возможно, уже удален из соответствующих веб-стандартов, может быть в процессе удаления или может храниться только в целях совместимости.Избегайте его использования и обновляйте существующий код, если это возможно;см. таблицу совместимости внизу этой страницы, чтобы принять решение.Имейте в виду, что эта функция может перестать работать в любое время.

Answer 2

Опора onClick реактивных отправлений React.ClickEvent, которая не имеет свойства keyCode. Поскольку это событие мыши, существование связанных с клавиатурой свойств объекта события нелогично.

Свойства, связанные с клавиатурой, существуют в React.KeyboardEvent, который отправляется реквизитами реагирования на события клавиатуры, такими как onChange, onKeyup, onKeyDown и т. Д.

https://codesandbox.io/s/kkv9ol6pr7

Answer 3

Привет, здесь вы используете тег h1, в этом теге невозможно обработать функцию onClick, сделайте это в теге Button, а затем попробуйте, чтобы он работал.

и вам нужно отправить параметр внутри onClick как onClick={(e) => this.handleClick(e)}

<Button onClick={(e) => this.handleClick(e)}>Hello CodeSandbox</Button>

для определенного ключевого кода вы переходите по ссылке ниже

Код ключа