[英]How to access stateless component state inside window event listener?
我有一个无状态组件,需要监听键盘事件。 它在安装组件时添加keydown
侦听器,并在卸载组件时将其删除。 有一个状态test
是boolean
值。 安装组件时将其设置为true
。 但是在keydown事件侦听器中,其值始终为false
。 看起来侦听器没有采用状态引用。 我的代码有什么问题?
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>
);
};
您可以在测试更改时重新运行useEffect,这将使侦听器始终具有当前值。
useEffect(() => {
setTest(true);
window.addEventListener('keydown', keyPressHandler);
return () => {
window.removeEventListener('keydown', keyPressHandler);
};
}, [test]);
并且应该将setTest从useEffect中删除,因为无论何时使用setTest()
它都会将test更改为true
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.