Событие React onKeyPress не обнаруживает возврат

У меня есть функция handleBackspace, которая что-то делает, если нажата клавиша Backspace.

Я пробовал это:

const handleBackspace = (e) => {
    if(e.keyCode === 8) {
        console.log('1')
    }
}

//
<input onKeyPress={handleBackspace}>

Но это не работает. (Я попробовал это с помощью keyCode 13 [enter] и это сработало. Но keyCode 8 [backspace] не работает) Может ли кто-нибудь показать мне решение?


reactjs javascript onkeypress
person Roy    schedule 18.05.2020    source источник
comment
Вы пытаетесь сопоставить клавишу [backspace] или [delete]? [удалить] равно 46. Кроме того, если вы регистрируете событие e, что такое keyCode?   -  person Davin Tryon    schedule 18.05.2020
comment
Я хочу обнаружить backspace   -  person Roy    schedule 18.05.2020
comment
Есть ли причина, по которой вы используете onKeyPress? Потому что для этого события keyCode всегда будет 0. Пробовали ли вы использовать onKeyDown?   -  person JDansercoer    schedule 18.05.2020
comment
Оно работает. Спасибо. Я действительно не знаю разницы между ними   -  person Roy    schedule 18.05.2020
comment
@Roy Дополнительную информацию можно найти здесь   -  person JDansercoer    schedule 18.05.2020
comment
Отвечает ли это на ваш вопрос? Прослушиватель JavaScript, нажатие клавиши не обнаруживает пробел?   -  person isAif    schedule 18.05.2020

Ответы (2)


arrow_upward
4
arrow_downward

Как можно прочитать здесь, onKeyPress получает только charCode вместо keyCode.

Это дает нам три возможных ответа на этот вопрос:

  • Либо измените событие на onKeyDown
  • Измените прослушиватель, чтобы проверить e.charCode
  • Используйте e.which, который будет работать как для onKeyPress, так и для onKeyDown.
person JDansercoer    schedule 18.05.2020

arrow_upward
1
arrow_downward

onKeyDown обнаруживает keyCode событий.

Попробуйте изменить его на событие onKeyDown.

Песочница: https://codesandbox.io/s/react-basic-class-component-kzv2k?file=/src/index.js

  handleBackspace = e => {
    if (e.keyCode === 8) {
      console.log("1");
    }
  };

  render() {
    return <input onKeyDown={this.handleBackspace} />;
  }
person VJR08    schedule 18.05.2020