如果您正在寻找文档级别的键事件处理，那么最好在此期间进行绑定componentDidMount（如Brad Colthurst的codepen示例所示）：
class ActionPanel extends React.Component {
constructor(props){
super(props);
this.escFunction = this.escFunction.bind(this);
}
escFunction(event){
if(event.keyCode === 27) {
//Do whatever when esc is pressed
}
}
componentDidMount(){
document.addEventListener("keydown", this.escFunction, false);
}
componentWillUnmount(){
document.removeEventListener("keydown", this.escFunction, false);
}
render(){
return (
<input/>
)
}
}
请注意，您应确保在卸载时删除键事件侦听器，以防止潜在的错误和内存泄漏。
编辑：如果您正在使用挂钩，则可以使用此useEffect结构来产生类似的效果：
const ActionPanel = (props) => {
const escFunction = useCallback((event) => {
if(event.keyCode === 27) {
//Do whatever when esc is pressed
}
}, []);
useEffect(() => {
document.addEventListener("keydown", escFunction, false);
return () => {
document.removeEventListener("keydown", escFunction, false);
};
}, []);
return (
<input />
)
};
602392714
清零编程群