javascript - 使用反应钩子切换对象内部的状态
问题描述
我正在努力在用户单击图像时显示叠加层。同样,如果叠加层已经可见,那么我想关闭它。下面是初始状态:
const [showOverlay, setShowOverlay] = useState({
visible: false,
xPosition: null,
yPosition: null
});
这是图像元素上的点击事件。此示例适用于显示图像,但显然它不会打开/关闭它。
onClick={(e) => setShowOverlay({
visible: true,
xPosition: e.pageX,
yPosition: e.pageY
})};
我一直在尝试使用“prevState”来切换这个特定的属性,但我没有任何运气。
onClick={(e,prevState) => setShowOverlay({
visible: !prevState.visible,
xPosition: e.pageX,
yPosition: e.pageY
})};
任何建议将不胜感激 - 谢谢!
解决方案
单击处理函数的第二个参数不是功能组件中随机状态值的先前状态。要获取先前的状态,请引用上面在组件中声明的独立有状态变量:
onClick={(e) => setShowOverlay({
visible: !showOverlay.visible,
xPosition: e.pageX,
yPosition: e.pageY
})};
或者使用 state setter 的回调形式:
onClick={(e) => setShowOverlay(showOverlay => ({
visible: !showOverlay.visible,
xPosition: e.pageX,
yPosition: e.pageY
}))};
推荐阅读
- yocto - Yocto:完全忽略 bbappend
- jakarta-ee - 我的 JavaEE 或 JakartaEE 版本是什么?
- javascript - 如何在函数组件中不使用usestate从材料ui TextField获取数据
- angular - 在 Angular 中自定义 Swiper.js 导航
- firebase - 没有错误,但在使用 GetX Flutter 时我没有从我的 Firestore 数据库中获取数据
- python - 使用jinja2循环通过html中的json对象
- php - 在 PHP 中使用 preg_match 从字符串中提取变量文本
- javascript - axios GET 请求在 MERN 应用程序中不起作用
- git - 如何删除 AWS Cloud9 上的存储库?
- python - 在 Python3 脚本中使用 speedtest-cli 测量互联网速度 - 收到错误消息“没有名为 speedtest 的模块”