React中如何排除Enter与Backspace触发onBlur事件？

这个问题我之前在项目里也踩过坑！核心矛盾就是：当你通过Enter/Backspace按键主动把焦点切到另一个输入框时，当前输入框的onBlur会被触发，但这时候你根本不想执行那个fetch请求对吧？下面给你几个React专属的解决方案，亲测有效：

方法一：用状态标记「按键触发的焦点切换」 #

思路是在按键触发焦点跳转前，先设置一个状态标记，在onBlur里检查这个标记——如果是按键导致的失去焦点，就跳过fetch请求，之后再重置标记。

import { useState, useRef } from 'react';

function InputGroup() {
  const [isKeyTriggeredBlur, setIsKeyTriggeredBlur] = useState(false);
  const targetInputRef = useRef(null);

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === 'Backspace') {
      // 标记即将到来的blur是按键触发的
      setIsKeyTriggeredBlur(true);
      // 跳转到目标输入框
      targetInputRef.current?.focus();
      // 用setTimeout在事件循环末尾重置状态，避免影响后续正常blur
      setTimeout(() => setIsKeyTriggeredBlur(false), 0);
    }
  };

  const handleBlur = () => {
    if (isKeyTriggeredBlur) {
      // 跳过不必要的fetch请求
      return;
    }
    // 执行原本的业务逻辑
    fetch('/your-api-endpoint')
      .then(res => res.json())
      .then(data => console.log('处理数据:', data));
  };

  return (
    <div>
      <input
        onKeyDown={handleKeyDown}
        onBlur={handleBlur}
        placeholder="输入内容后按Enter/Backspace"
      />
      <input
        ref={targetInputRef}
        placeholder="目标输入框"
      />
    </div>
  );
}

方法二：利用relatedTarget判断焦点去向（更简洁） #

React的合成事件里，onBlur事件对象的relatedTarget属性会指向新获得焦点的元素。我们可以直接判断这个元素是不是我们要跳转的目标输入框，如果是，就跳过fetch。

import { useRef } from 'react';

function InputGroup() {
  const targetInputRef = useRef(null);

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === 'Backspace') {
      targetInputRef.current?.focus();
    }
  };

  const handleBlur = (e) => {
    // 如果焦点是跳转到了目标输入框，就跳过fetch
    if (e.relatedTarget === targetInputRef.current) {
      return;
    }
    // 正常执行业务逻辑
    fetch('/your-api-endpoint')
      .then(res => res.json())
      .then(data => console.log('处理数据:', data));
  };

  return (
    <div>
      <input
        onKeyDown={handleKeyDown}
        onBlur={handleBlur}
        placeholder="输入内容后按Enter/Backspace"
      />
      <input
        ref={targetInputRef}
        placeholder="目标输入框"
      />
    </div>
  );
}

避坑提醒：别用e.preventDefault() #

不要尝试在onKeyDown里调用e.preventDefault()来阻止blur——这会直接打断浏览器的焦点跳转逻辑，导致你无法切换到目标输入框，反而引发新问题。

方案选择建议 #

• 如果只是跳转到单个固定输入框，优先选方法二，不需要额外状态管理，代码更简洁。
• 如果需要跳转到多个不同元素，或者有更复杂的触发条件，方法一的状态标记方式会更灵活。

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