在 React 中，onChange 和 onInput 有什么区别? [英] In React, what's the difference between onChange and onInput?
问题描述
我已经尝试四处寻找答案，但大多数都在 React 上下文之外，其中 onChange 在模糊时触发.
I've tried searching around for an answer to this, but most of them are outside the context of React, where onChange triggers upon blur.
在执行各种测试时，我似乎无法分辨这两个事件有何不同(应用于 textarea 时).任何人都可以对此有所了解吗?
In performing various tests, I can't seem to tell how these two events are different (when applied to a textarea). Can anyone shed some light on this?
推荐答案
好像没什么区别
由于某种原因，React 将 Component.onChange 的侦听器附加到 DOM element.oninput 事件.请参阅表单文档中的注释:
It seems there is no real difference
React, for some reason, attaches listeners for Component.onChange to the DOM element.oninput event. See the note in the docs on forms:
有更多人对这种行为感到惊讶.有关更多详细信息，请参阅 React 问题跟踪器上的此问题:
There are more people that are surprised by this behavior. For more details, refer to this issue on the React issue tracker:
记录 React 的 onChange 如何与 onInput #3964 相关
引自对该问题的评论:
我不明白为什么 React 选择让 onChange 表现得像 onInput 那样.据我所知，我们无法恢复旧的 onChange 行为.文档声称这是用词不当"但不是真的，它会在发生变化时触发，直到输入也失去焦点.
I don't understand why React chose to make onChange behave like onInput does. As fas as I can tell, we have no way of getting the old onChange behaviour back. Docs claim it's a "misnomer" but not it isn't really, it does fire when there's a change, just not until the input also loses focus.
对于验证，有时我们不想在输入完成之前显示验证错误.或者我们只是不想在每次击键时重新渲染.现在唯一的方法是使用 onBlur 但现在我们还需要检查该值是否已手动更改.
For validation, sometimes we don't want to show validation errors until they're done typing. Or maybe we just don't want a re-render on every keystroke. Now the only way to do that is with onBlur but now we also need to check that the value has changed manually.
这没什么大不了的，但在我看来，React 丢弃了一个有用的事件，并在已经有一个执行此操作的事件时偏离了标准行为.
It's not that big of a deal, but it seems to me like React threw away a useful event and deviated from standard behaviour when there was already an event that does this.
我 100% 同意评论......但我想现在改变它会带来比它解决的更多的问题，因为已经编写了这么多依赖于这种行为的代码.
I agree 100% with the comment... But I guess changing it now would bring more problems than it solves since so much code had already been written that relies on this behavior.
React 不是官方 Web API 集合的一部分
尽管 React 是建立在 JS 之上的，并且已经看到了巨大的采用率，但作为一项技术，React 的存在是为了将大量功能隐藏在自己的(相当小的)API 下.在事件系统中，这一点很明显，在表面下发生的很多事情实际上与标准 DOM 事件系统完全不同.不仅涉及哪些事件做什么，还涉及何时允许数据保留在事件处理的哪个阶段.您可以在此处阅读更多相关信息:
Even though React is built on top of JS, and has seen a huge adoption rate, as a technology React exists to hide a whole lot of functionality under its own (fairly small) API. Once area where this is obvious is in the event system, where there's a lot going on under the surface that's actually radically different from the standard DOM event system. Not just in terms of which events do what, but also in terms of when data is allowed to persist at what stage of the event handling. You can read more about that here:
这篇关于在 React 中，onChange 和 onInput 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
