Почему событие onKeyDown не влияет на приложение React? - PullRequest
Новая
       45

Почему событие onKeyDown не влияет на приложение React?

0 голосов
/ 12 апреля 2020

Добавлен onKeyDown ввод обработчика событий в React функциональном компоненте. Приложение нужно перенаправить при нажатии Done или Return на виртуальной iOS / клавиатуре mobil, но этого не происходит. Почему? В чем проблема с реализацией? 

<input
  className={`${classes.borderedInput} ${classes.middleFont}`}
  placeholder={sm ? "events" : "city or place"}
  onFocus={deletePlaceholder}
  onBlur={e => makePlaceholder(e, sm ? "events" : "city or place")}
  onKeyDown={keyPress}
/>

const keyPress = e => {
  if (e.keyCode == 13) {
    this.props.history.push("/ongoingEventList");
  }
};

Использовал это руководство для добавления слушателя клавиатуры:

https://www.freecodecamp.org/forum/t/react-redux-adding-a-handler-for-enter-key-events/241151

1 Ответ

1 голос
/ 12 апреля 2020

Вы используете компонент functional, а в обработчике keyPress вы используете this.

Так что просто сделайте 

props.history.push("/ongoingEventList");

Полный пример 

const KeyPressDemo = props => {
  const keyPress = e => {
    if (e.keyCode == 13) {
      props.history.push('/ongoingEventList')// remove `this`
    }
  };
  return (
    <input
      className={`${classes.borderedInput} ${classes.middleFont}`}
      placeholder={"city or place"}
      onFocus={deletePlaceholder}
      onBlur={e => makePlaceholder(e, sm ? "events" : "city or place")}
      onKeyDown={keyPress}
    />
  );
};

Надеюсь, вы определяете обработчик keyPress внутри функционального компонента (не снаружи) и правильно используйте опору history.

, если проблема по-прежнему, оставьте комментарий ..

...