React JS中如何让button的onClick()先于textarea的onBlur()执行？

问题核心是：点击按钮时，textarea会先失焦触发onBlur，导致按钮被隐藏，从而onClick事件无法触发。下面是几种可行的解决方法：

方法一：延迟执行onBlur中的隐藏逻辑 #

在onBlur里用setTimeout给按钮的点击事件留足执行时间，再隐藏按钮：

const handleBlur = () => {
  // 延迟100ms执行隐藏，确保点击事件先触发
  setTimeout(() => {
    setShowButton(false);
  }, 100);
};

const handleClick = () => {
  setShowText(true);
};

优点：实现简单，无需修改DOM结构；缺点：存在微小的延迟感，极端情况下可能仍有问题。

方法二：通过relatedTarget判断失焦目标 #

利用事件对象的relatedTarget属性，判断失焦后焦点是否转移到按钮上。如果是，就不隐藏按钮，等点击事件执行完成后再处理：

const handleBlur = (e) => {
  // 检查失焦后焦点是否不在按钮上，再隐藏
  const isButtonFocused = e.relatedTarget?.id === 'your-button-id';
  if (!isButtonFocused) {
    setShowButton(false);
  }
};

const handleClick = () => {
  setShowText(true);
  // 点击完成后手动隐藏按钮
  setShowButton(false);
};

优点：精准控制，无延迟；缺点：需要给按钮加标识（如id），或通过DOM关系判断。

方法三：用容器的focusin/focusout事件替代textarea的onBlur #

把textarea和按钮放在同一个容器中，监听容器的focusin和focusout事件。因为按钮在容器内，点击按钮时容器不会失焦，避免提前隐藏按钮：

<div 
  onFocusIn={() => setShowButton(true)}
  onFocusOut={(e) => {
    // 检查焦点是否完全离开容器
    if (!e.currentTarget.contains(e.relatedTarget)) {
      setShowButton(false);
    }
  }}
  style={{ position: 'relative' }}
>
  <textarea />
  {showButton && (
    <button onClick={() => setShowText(true)}>
      点击显示文本
    </button>
  )}
</div>

优点：逻辑更优雅，符合DOM焦点事件的冒泡特性；缺点：需要调整DOM结构，将按钮和textarea放在同一容器内。

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