时间戳

首页 > 解决方案 > 为什么 onKeyDown 事件在 React 应用程序中不起作用？

reactjs - 为什么 onKeyDown 事件在 React 应用程序中不起作用？

问题描述

在功能组件中添加onKeyDown了事件处理程序输入。React应用程序需要在按下虚拟 iOS / mobil 键盘时Done或Return上进行重定向，但不会发生。为什么？实施有什么问题？

<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

标签： reactjskeyboardvirtual-keyboard

解决方案

您正在使用一个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正确使用道具。

如果还有问题，请发表评论..

推荐阅读