React 触发虚拟 DOM 输入的 onChange 事件与常规 DOM 中的输入不同。为啥是这样？

Posted 2023-02-22

【中文标题】React 触发虚拟 DOM 输入的 onChange 事件与常规 DOM 中的输入不同。为啥是这样？

【英文标题】：React triggers onChange events for virtual DOM inputs differently than inputs in the regular DOM. Why is this?React 触发虚拟 DOM 输入的 onChange 事件与常规 DOM 中的输入不同。为什么是这样？

【发布时间】：2016-12-23 02:31:47

【问题描述】：

在虚拟 DOM 中，每次输入内容发生变化时都会触发 onChange。在常规 DOM 中，onChange 仅在输入元素模糊时触发。

link to GIF illustrating the behavior

示例项目：

source code for the above demo

为什么 React 会为虚拟 DOM 元素触发不同的 onChange 事件？

【问题讨论】：

你的意思是问如何这是这样实现的吗？或者为什么？ 为什么将归结为受控字段的必要性以及它们如何以反应的方式工作；也就是说，当您通过键入来更新受控字段时，react 需要更新表示该字段值的状态变量。只有在每次更改字段值时都触发更改时才能执行此操作。

哦，是的，我问“这是为什么？”在问题标题中。啊，有道理。谢谢@LiamEgan

可以否决投票者请发表评论解释？谢谢！

【参考方案1】：

React DOM 故意偏离并在每次更改时触发 onChange，因为这几乎总是你想要的。这在此处的文档中有所描述：Forms。