使用反应钩子切换对象内部的状态

Question

我正在努力在用户单击图像时显示叠加层。同样，如果叠加层已经可见，那么我想关闭它。下面是初始状态：

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
})};

任何建议将不胜感激 - 谢谢！

Answer 1

点击处理函数的第二个参数不是功能组件中随机状态值的先前状态。要获得以前的状态，请引用上面在组件中声明的独立状态变量：

onClick={(e) => setShowOverlay({
   visible: !showOverlay.visible,
   xPosition: e.pageX,
   yPosition: e.pageY
})};

或者使用状态设置器的回调形式：

onClick={(e) => setShowOverlay(showOverlay => ({
   visible: !showOverlay.visible,
   xPosition: e.pageX,
   yPosition: e.pageY
}))};