[英]How to access stateless component state inside window event listener?
I have a stateless component which needs to listen on keyboard event. 我有一个无状态组件,需要监听键盘事件。 It adds
keydown
listener when the component is mounted and remove it when the component is unmounted. 它在安装组件时添加
keydown
侦听器,并在卸载组件时将其删除。 There is a state test
is boolean
value. 有一个状态
test
是boolean
值。 It is set to true
when the component is mounted. 安装组件时将其设置为
true
。 But in the keydown event listener, its value always false
. 但是在keydown事件侦听器中,其值始终为
false
。 It looks like the listener doesn't take the state reference. 看起来侦听器没有采用状态引用。 What's wrong with my code?
我的代码有什么问题?
const { useEffect, useState } = React;
const Comp = () => {
const [test, setTest] = useState(false);
const keyPressHandler = (e) => {
setTest(!test);
console.log(test);
}
useEffect(() => {
setTest(true);
window.addEventListener('keydown', keyPressHandler);
return () => {
window.removeEventListener('keydown', keyPressHandler);
};
}, []);
return (
<div className="test">
hello {test + ""}
</div>
);
};
You can re-run useEffect when test change which will make the listener always have the current value. 您可以在测试更改时重新运行useEffect,这将使侦听器始终具有当前值。
useEffect(() => {
setTest(true);
window.addEventListener('keydown', keyPressHandler);
return () => {
window.removeEventListener('keydown', keyPressHandler);
};
}, [test]);
and you should remove the setTest from the useEffect since it will keep changing test to true
whenever you use setTest()
. 并且应该将setTest从useEffect中删除,因为无论何时使用
setTest()
它都会将test更改为true
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.