React中添加input事件监听器为何会导致受控输入组件失效？

为什么addEventListener('input')和onInput会有差异？ #

核心原因在于React的合成事件机制与原生DOM事件的执行时机、处理逻辑完全不同：

1. React合成事件的批量更新特性
   React的onInput/onChange属于合成事件，由React统一在document层面做事件委托管理。当这类事件触发时，React会把事件处理函数中所有setState调用批量处理，等事件逻辑执行完毕后，再一次性更新所有状态并触发组件渲染。这样能保证组件渲染时，所有相关状态（比如你的val和other）都是最新的，不会出现状态不一致的问题。

2. 原生DOM事件的即时更新特性
   直接通过addEventListener绑定的原生input事件，会在React合成事件之前触发（原生事件在目标元素上的执行优先级高于冒泡到document的合成事件）。当你在原生事件处理函数中调用setOther时，React会立即触发组件重新渲染——但此时React的onChange合成事件还没执行，val状态还是旧值，受控组件的value会被重置为旧值，直接覆盖用户刚输入的内容，导致输入失效、光标错位。

最佳解决方案 #

根据你的需求，这里有几种推荐的解决方式：

方案1：合并状态更新到React合成事件中（最简洁） #

既然你的input是受控组件，直接把更新other的逻辑放到onChange合成事件里，让React批量处理两个状态更新，避免提前渲染导致的冲突：

const Hello = (props) => {
  const inputRef = React.useRef();
  const [val, setVal] = React.useState("Can type here now!");
  const [other, setOther] = React.useState(0);

  const handleChange = (ev) => {
    const newValue = ev.target.value;
    setVal(newValue);
    // 把更新other的逻辑合并到合成事件中
    setOther(prev => prev + 1);
  };

  return (
    <input ref={inputRef} value={val} onChange={handleChange} />
  );
}

方案2：通过监听状态变化触发更新（适合Hook解耦场景） #

如果你的Hook需要和渲染逻辑完全解耦，不想依赖合成事件，可以通过useEffect监听val的变化来更新other——这样既保证了状态更新的同步性，又不需要直接绑定原生事件：

const Hello = (props) => {
  const inputRef = React.useRef();
  const [val, setVal] = React.useState("Can type here now!");
  const [other, setOther] = React.useState(0);

  // 当val更新时，自动触发other的更新
  React.useEffect(() => {
    setOther(prev => prev + 1);
  }, [val]); // 依赖val，只有val变化时才执行

  return (
    <input ref={inputRef} value={val} onChange={ev => setVal(ev.target.value)} />
  );
}

方案3：若必须使用原生事件（进阶） #

如果因为Hook封装的需求必须使用原生事件，你可以通过flushSync强制同步更新状态，但这种方式会破坏React的批量更新优化，仅在特殊场景下使用：

import { flushSync } from 'react-dom';

const Hello = (props) => {
  const inputRef = React.useRef();
  const [val, setVal] = React.useState("Can type here now!");
  const [other, setOther] = React.useState(0);

  React.useEffect(() => {
    const inputEl = inputRef.current;
    const handleInput = (ev) => {
      // 先同步更新val，再更新other
      flushSync(() => {
        setVal(ev.target.value);
      });
      setOther(prev => prev + 1);
    };
    inputEl.addEventListener('input', handleInput);
    return () => inputEl.removeEventListener('input', handleInput);
  }, []);

  return (
    <input ref={inputRef} value={val} />
  );
}

注意：方案3需要移除原有的onChange，避免重复触发状态更新。

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