如何为表单元素绑定onBlur事件但排除重置按钮？

你遇到的核心问题是：在React中，form元素的onBlur事件对应原生的focusout（冒泡事件），当点击表单内的重置按钮时，焦点从输入框转移到按钮，会触发form的onBlur，干扰了重置按钮的onReset执行。

不用给每个输入框单独绑定onBlur，可以用以下两种方法解决：

方法一：在handleBlur中判断焦点是否仍在表单内 #

修改你的handleBlur函数，通过relatedTarget检查焦点将要移动到的元素是否属于表单内部，如果是则跳过逻辑：

const handleBlur = (e) => {
  // 确认焦点已经完全离开表单区域再执行逻辑
  if (e.currentTarget.contains(e.relatedTarget)) {
    return;
  }
  // 这里写你原来的onBlur处理逻辑
};

这样当点击重置按钮时，relatedTarget是按钮元素（属于表单子元素），handleBlur会直接返回，不会干扰重置操作。

方法二：阻止重置按钮的mousedown默认行为 #

给重置按钮添加onMouseDown事件，阻止默认行为，避免焦点从输入框转移到按钮（也就不会触发form的onBlur）：

<button type="reset" onMouseDown={(e) => e.preventDefault()}>Reset</button>

注意：这种方法会让按钮无法获得焦点，可能对无障碍访问有影响，建议优先使用方法一。

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