React中onBlur是否能获取到onChange中更新的最新状态？

嘿，这个问题问得挺细致的，我来给你掰扯清楚~

首先先给你吃个定心丸：大部分日常场景下，你现在的写法是能正常拿到最新状态的，但也存在特殊情况可能踩坑，我给你慢慢说：

为什么你现在的情况能正常工作？ #

咱们先聊常规场景：比如你在输入框里敲完内容，停一下再点击别处触发失焦（onBlur）。这时候的事件顺序是确定的：

• 每敲一个字符，onChange事件会同步执行，里面的代码（包括调用setState）会完整跑完
• React处理完这次状态更新，组件完成重渲染
• 等你点击别处触发onBlur时，新的渲染已经完成，onBlur里拿到的自然是更新后的状态

这种情况下完全不用担心异步的问题，因为两个事件不在同一个事件循环里，状态更新早就处理妥当了。

可能踩坑的特殊场景 #

那什么时候会出问题呢？比如你输入内容后立刻按Tab键——这时候输入框会同时触发onChange（因为内容变化）和onBlur（因为失去焦点），而且这两个事件会在同一个事件循环里执行。

如果是函数组件，你直接用闭包里的state值的话，就可能拿到旧值！因为函数组件的state是“快照式”的，onBlur的处理函数捕获的是当前渲染周期的state，而这时候React还没来得及处理onChange的状态更新，组件也没重渲染。

举个实际的例子，你可以试试这段代码：

import { useState } from 'react';

function TestInput() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    console.log('onChange的新值:', e.target.value);
    setValue(e.target.value);
  };

  const handleBlur = () => {
    console.log('onBlur拿到的state:', value);
  };

  return <input value={value} onChange={handleChange} onBlur={handleBlur} />;
}

初始值是空字符串，你输入“a”然后立刻按Tab，控制台会输出：

onChange的新值: a
onBlur拿到的state: 

看到没？这时候onBlur拿到的还是旧的空值！

怎么确保100%拿到最新状态？ #

如果想要不管什么场景都稳拿最新值，有两个简单的办法：

• 直接用DOM元素的当前值：在onBlur的参数里拿到event，用e.target.value，这是DOM元素的实时值，肯定是最新的，完全不用依赖state
• 用useRef存最新值：函数组件里可以用ref来同步最新的state，因为ref的current属性是可变的，不受闭包影响：

  import { useState, useRef } from 'react';
  
  function SafeInput() {
    const [value, setValue] = useState('');
    const latestValue = useRef('');
  
    const handleChange = (e) => {
      const newVal = e.target.value;
      setValue(newVal);
      latestValue.current = newVal; // 同步更新ref
    };
  
    const handleBlur = () => {
      console.log('绝对最新的值:', latestValue.current);
    };
  
    return <input value={value} onChange={handleChange} onBlur={handleBlur} />;
  }
  

总结 #

如果你只是日常的输入后失焦操作，当前写法完全没问题；但要是想覆盖所有极端场景，最好用上面提到的两种方法之一，确保万无一失。

备注：内容来源于stack exchange，提问作者bored_coffee