在React中,onChange和onInput有什么区别?

JavaScript React.js

斯丁Jim

2020-03-17

我已经尝试过寻找答案,但是其中大多数都在React的上下文之外,而后者onChange会在模糊时触发。

在执行各种测试时,我似乎无法分辨出这两个事件有何不同(应用于文本区域时)。谁能对此有所启发?

第1872篇《在React中,onChange和onInput有什么区别?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
Itachi达蒙Green 2020.03.17

如您在此处的各种评论中所见,React将onChange和onInput视为相同,因此,无需辩论此决定的优缺点。这是解决方案。

如果您不想在完成用户编辑之前对其进行处理,请使用onBlur。:)

Gil启人 2020.03.17

最近我遇到一个错误,该错误onChange不允许在IE11的输入字段中进行复制和粘贴。而该onInput事件将允许该行为。我在文档中找不到任何描述此内容的文档,但这确实表明两者之间存在差异(预期与否)。

伽罗番长 2020.03.17

似乎没有真正的区别

由于某种原因,React将侦听器附加Component.onChange到DOM element.oninput事件。请参阅表单文档中的注释:

React Docs-表格

有更多的人对此行为感到惊讶。有关更多详细信息,请在React问题跟踪器上参考此问题:

记录React的onChange与onInput#3964的关系

引用关于该问题的评论:

我不明白为什么React选择使onChange表现得像onInput一样。据我所知,我们无法恢复旧的onChange行为。Docs声称这是一个“错误用语”,但事实并非如此,它会在发生更改时触发,只是直到输入也失去焦点为止。

为了进行验证,有时我们不希望在输入完毕后显示验证错误。或者,也许我们只是不想在每次击键时都重新渲染。现在唯一的方法是使用onBlur,但现在我们还需要检查该值是否已手动更改。

没什么大不了的,但是在我看来,React抛弃了一个有用的事件,并且在已经有一个事件可以执行时却偏离了标准行为。

我同意100%的评论...但是我想现在更改它会带来比解决方案更多的问题,因为已经编写了太多依赖此行为的代码(并且它也已复制到其他框架,例如Preact) 。

React不是官方Web API集合的一部分

尽管React是基于JS构建的,并且已经获得了巨大的采用率,但是作为一种技术,React存在于其自己的(相当小的)API下隐藏了很多功能。一旦这在事件系统中很明显,那么在地下发生的事情实际上与标准DOM事件系统有很大的不同。不仅根据哪个事件执行了什么操作,还根据何时允许数据保留在事件处理的哪个阶段。您可以在这里阅读更多有关此的内容:

反应事件系统

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android