为什么onKeyDown事件在React应用程序中没有效果

Question

在React功能组件中添加了onKeyDown事件处理程序输入。当按下虚拟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

Answer 1

您使用的是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道具。

如果仍然是个问题，请留言。。