React受控输入中event.target.value工作原理及相关疑问

先看这个带受控输入的React组件示例：

const MyInputs = () => {
  const [val, setVal] = useState("")

  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
    setVal(event.target.value)  // 这里的event.target.value是什么？
  }

  return (
    <form>
      <input value={val} />
    </form>
  )
}

你的理解没错：这个组件里的input没绑定onChange处理函数，所以不管怎么输入，输入框里都不会显示任何内容。而原生HTML里的<input value="something" />，输入字符时屏幕会显示，同时input的value属性也会跟着变。

接下来逐个解答你的疑问：

1. React是否会拦截受控组件的change事件，主动阻止输入框的value随键盘输入变化？ #

React不会直接拦截change事件，但它会强制让输入框的显示值始终和组件状态保持一致。当用户在受控输入框里输入时，浏览器原生行为会先尝试修改输入框的显示值，但React在组件渲染时，会把input的value设为状态里的val——因为你没绑定onChange更新状态，val一直是空字符串，所以每次输入后React重渲染，又把input的value改回空，看起来就像输入没生效。本质是React的渲染逻辑覆盖了浏览器的原生修改，不是拦截事件阻止。

2. 既然受控输入的value仅能随组件状态变化而改变，为何event.target.value能获取用户输入的当前文本？ #

这里要区分两个概念：React渲染的value属性和输入框的DOM元素实时值。当用户输入时，浏览器已经先把输入的内容更新到了DOM元素的value属性里（这是原生行为），此时React还没来得及重渲染覆盖它。所以在onChange事件触发时，event.target.value拿到的是浏览器刚更新的DOM实时值，而不是React状态里的旧值。等你在onChange里调用setVal更新状态后，组件重渲染，React才会把input的value设为新的状态值，和DOM同步。

3. 如果React确实按问题1所述拦截事件，手动绑定到受控input的onChange属性的处理函数是否会覆盖这些拦截处理？ #

首先纠正下，React不是拦截事件，而是靠渲染逻辑同步状态和输入框值。你绑定的onChange处理函数是React事件系统的一部分，它会在浏览器原生事件触发后执行。当你在onChange里更新状态，React就会在下一次渲染时把input的value设为新状态值，这样输入框的显示就会跟着用户输入变化——这就是受控组件正常工作的逻辑，不存在“覆盖拦截”，而是你主动通过状态更新让输入框值和用户输入同步。

4. 在浏览器行为层面，原生HTML输入框显示用户输入字符与React因组件状态变化（由用户键盘输入触发）重新渲染有何区别？ #

• 原生HTML输入框：用户输入后，浏览器直接修改DOM元素的value属性并更新显示，整个过程没有框架介入，是浏览器的原生UI更新逻辑，同步且即时。
• React受控输入：用户输入先触发浏览器原生行为，更新DOM的value并临时显示；接着React的onChange事件触发，你更新组件状态；状态变化触发组件重渲染，React会对比虚拟DOM，发现input的value属性和当前DOM的value不一致，就会调用DOM API把input的value设为状态值，最终完成显示同步。这个过程多了React状态更新和虚拟DOM对比的步骤，但因为React的更新机制很高效，用户几乎感觉不到延迟。

另外你补充提到的：React里<input value=... />的value是你传给组件的属性，对应虚拟DOM的属性；而$myInputElement.value是真实DOM元素的属性。MDN说的是真实DOM的value属性会包含当前输入值，这和React的受控逻辑不冲突——React只是通过渲染逻辑，让真实DOM的value最终和虚拟DOM的属性（也就是组件状态）保持一致。

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