React中按钮onClick触发布尔状态需两次点击才更新的问题

问题根源 #

你的核心问题是第三方Tooltip组件的触发逻辑和React状态更新的异步性冲突：
第一次点击按钮时，Tooltip的显示判断逻辑会先执行（此时enableTooltip还是初始的false，disabled为true），之后React才会异步更新enableTooltip为true。但此时Tooltip的触发时机已经错过，所以不会显示；第二次点击时，状态已经更新完成，disabled为false，Tooltip才会正常触发显示。

另外你之前尝试的prevState => !prevState逻辑完全错误——不管字段是否无效，都直接取反状态，这只会让状态来回切换，根本没关联字段有效性判断。

可行解决方案 #

1. 直接用visible/open属性控制显示（优先推荐）

绝大多数第三方Tooltip组件都提供visible（或open）属性来直接控制显示状态，而非仅依赖disabled（disabled通常是控制是否允许触发，比如hover/click能否唤起Tooltip）。调整代码如下：

const MyComponent = () => {
  const [showTooltip, setShowTooltip] = useState(false);
  // 用ref获取Tooltip实例，方便手动控制显示/隐藏
  const tooltipRef = useRef(null);

  const handleClick = () => {
    const isFieldsInvalid = fieldsInvalid();
    setShowTooltip(isFieldsInvalid);
    
    // 如果需要即时强制显示（避免状态更新延迟），调用组件内置方法
    if (isFieldsInvalid) {
      tooltipRef.current?.show?.();
    } else {
      tooltipRef.current?.hide?.();
    }
  };

  return (
    <>
      <InputFields />
      <Tooltip 
        ref={tooltipRef}
        visible={showTooltip}
        disabled={!showTooltip} // 可选：控制是否允许用户通过hover/click手动触发
      >
        <Button slot="trigger" onClick={handleClick} />
        Tooltip text
      </Tooltip>
    </>
  );
};

2. 延迟触发Tooltip显示（临时hack方案）

如果组件没有visible属性，可利用setTimeout让Tooltip的触发逻辑等待React状态更新完成：

const MyComponent = () => {
  const [enableTooltip, setEnableTooltip] = useState(false);
  const buttonRef = useRef(null);

  const handleClick = () => {
    const isFieldsInvalid = fieldsInvalid();
    setEnableTooltip(isFieldsInvalid);

    if (isFieldsInvalid) {
      // 等待React状态更新后，重新触发按钮点击，唤起Tooltip
      setTimeout(() => {
        buttonRef.current?.click();
      }, 0);
    }
  };

  return (
    <>
      <InputFields />
      <Tooltip disabled={!enableTooltip}>
        <Button ref={buttonRef} slot="trigger" onClick={handleClick} />
        Tooltip text
      </Tooltip>
    </>
  );
};

3. 检查第三方组件的disabled属性逻辑

部分组件的disabled属性是禁止触发Tooltip的交互，而不是控制显示状态。也就是说，当disabled为true时，点击trigger完全不会触发Tooltip的显示逻辑——第一次点击时disabled是true，Tooltip根本没执行显示判断；状态更新为false后，第二次点击才会触发显示逻辑。这种情况下必须改用visible属性控制显示。

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