React onClick事件问题：如何实现打开时关闭、关闭时保持关闭

问题回顾 #

现有状态初始化代码：

const [open, setOpen] = useState(true);

以及点击事件代码：

onClick={() => setOpen(!open != true)}

需求为：当组件处于打开状态时点击则关闭，处于关闭状态时点击则保持关闭。当前代码仅能实现后者，无法完成“打开状态点击关闭”的要求。

问题根源 #

原代码中的!open != true逻辑等价于open === true：

• 当open为true时，!open是false，false != true结果为true，最终调用setOpen(true)，维持打开状态，与需求相悖；
• 当open为false时，!open是true，true != true结果为false，调用setOpen(false)，维持关闭状态，符合需求。

修改方案 #

我们只需要在点击时判断：如果当前是打开状态（open === true），则切换为关闭；如果已经是关闭状态，不做任何改变。以下几种写法都可以实现：

写法1：简洁直接的状态设置

onClick={() => setOpen(false)}

这种写法最简洁，无论当前状态如何，点击后直接设置为关闭状态，完全符合需求。

写法2：显式条件判断（可读性更强）

onClick={() => {
  if (open) {
    setOpen(false);
  }
}}

通过if语句明确判断当前状态，仅在打开时执行关闭操作，逻辑清晰易懂。

写法3：函数式更新（适合依赖前状态的复杂场景）

onClick={() => setOpen(prevOpen => prevOpen ? false : false)}

使用函数式更新获取前一次状态，根据前状态决定新状态，逻辑与写法2一致，适合需要依赖前状态的更复杂场景。

内容的提问来源于stack exchange，提问作者Boq7