javascript - 如何通过按键在 React 中挂载/卸载组件?
问题描述
我正在制作一个在键盘按下时呈现 3d 对象的应用程序。我希望这些对象在 2-3 秒后消失,或者在动画播放完毕后消失。
这是一个处理按键逻辑的组件:
const Selector = () => {
const [selector, setSelector] = useState(null);
useEffect(() => {
function setupKeyLogger() {
document.onkeydown = function (e) {
console.log(e);
switch (e.keyCode) {
case 65:
setSelector('SpinningCube');
break;
case 83:
setSelector('SmallCube');
break;
default:
break;
}
};
}
setupKeyLogger();
});
switch (selector) {
case 'SpinningCube':
return (
<>
<SpinningCube />
</>
);
case 'SmallCube':
return (
<>
<SmallCube />
</>
);
default:
return <></>;
}
};
现在,当我按下两个不同的键时,它正在两个对象之间<SpinningCube />
切换<SmallCube />
。但是,如果我向某个键发送垃圾邮件,它只会在初始按键时呈现组件。我希望它在每次我击键时重新渲染并重新启动组件上的动画,即使它一遍又一遍地重复。我假设我需要一种方法来卸载然后在每次击键时重新安装组件?
我正在使用 Three 和 React Spring 来处理我的动画。
解决方案
当 props 或 state 发生变化时,组件将重新渲染。当您向按钮发送垃圾邮件时,会设置相同的状态,但不会更改,因此不会发生任何事情。因此,您需要的是在每次按下时翻转并传递给孩子的另一个参数(强制他们重新渲染)。
const Selector = () => {
const [selector, setSelector] = useState(null);
const [forceRender, setForceRender] = useState(0);
const forceAnimation = (selected) => {
setSelector(selected);
setForceRender(++forceRender);
};
useEffect(() => {
function setupKeyLogger() {
document.onkeydown = function (e) {
console.log(e);
switch (e.keyCode) {
case 65:
forceAnimation('SpinningCube');
break;
case 83:
forceAnimation('SmallCube');
break;
default:
break;
}
};
}
setupKeyLogger();
});
switch (selector) {
case 'SpinningCube':
return (
<key={forceRender}> // if this doesn't work, I'd try passing it to a React.Fragment or div instead
<SpinningCube />
</>
);
case 'SmallCube':
return (
<key={forceRender}>
<SmallCube />
</>
);
default:
return <></>;
}
};
推荐阅读
- flutter - Flutter TextField 禁用边框
- date - 在 AWS 上的 python3 中将特定时间转换为 UTC
- java - 获取java中特定行值的更新时间
- flutter - 在 Flutter 中结合 SingleChildScrollView 和 PageView
- python - 尝试使用 python-ldap 模块通过 TLS 连接到 LDAP 服务器
- reactjs - React Grid:如何制作一个网格项来填充空白
- wordpress - WP_Query 复制使用高级自定义字段生成的自定义帖子
- python - 如何在不单击“CTRL + C”的情况下通过 cmd 中的命令停止 Django 服务器?
- c# - 我可以将 TCPClient 的底层套接字与 Socket.Select 一起使用吗?
- javascript - 为什么 JavaScript 没有进入 For...in 循环