在React中,onChange和onInput之间有什么区别？

Question

我已经尝试过寻找答案,但其中大多数都不在React的背景下,onChange触发模糊.

在执行各种测试时,我似乎无法分辨这两个事件是如何不同的(当应用于textarea时).任何人都可以对此有所了解吗？

Answer 1

似乎没有真正的区别.

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

反应文档 - 表单

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

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

引用该问题的评论:

我不明白为什么React选择使onChange行为像onInput一样.正如我所知,我们无法恢复旧的onChange行为.Docs声称这是一个"用词不当",但并不是真的,它会在有变化时触发,直到输入也失去焦点.

对于验证,有时我们不希望在完成输入之前显示验证错误.或者也许我们只是不想在每次击键时重新渲染.现在唯一的方法是使用onBlur,但现在我们还需要检查值是否已手动更改.

这并不是什么大不了的事情,但在我看来,就像React丢掉了一个有用的事件而偏离了标准行为时,就已经发生了这样的事件.

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

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

尽管React是建立在JS之上的,并且已经看到了巨大的采用率,但作为一种技术React存在于隐藏其自身(相当小的)API下的大量功能.一旦显而易见的区域出现在事件系统中,表面下的很多区域实际上与标准DOM事件系统完全不同.不仅在哪些事件做什么方面,而且在数据被允许在事件处理的哪个阶段持续存在的方面.你可以在这里阅读更多相关信息:

反应事件系统

Answer 2

一个区别似乎是，onChange当选择一个字符并将其替换为相同字符时，不会触发 ，而onInput会触发。

请参阅此沙箱：https://codesandbox.io/s/react-onchange-vs-oninput-coggf ?file=/src/App.js

• 在字段中输入“A”，然后选择全部并输入“B”。这将触发 4 个事件， 2onChange和 2 onInput。
• 现在选择全部并再次输入“B”，这直到触发一个新onInput事件，但没有onChange。

Answer 3

对于任何偶然发现这个问题并正在寻找一种方法来侦听基于 DOM 的实际change事件的人，我就是这样做的（用 TypeScript 编写）：

import { Component, createElement, InputHTMLAttributes } from 'react';

export interface CustomInputProps {
    onChange?: (event: Event) => void;
    onInput?: (event: Event) => void;
}

/**
 * This component restores the 'onChange' and 'onInput' behavior of JavaScript.
 *
 * See:
 * - https://reactjs.org/docs/dom-elements.html#onchange
 * - https://github.com/facebook/react/issues/3964
 * - https://github.com/facebook/react/issues/9657
 * - https://github.com/facebook/react/issues/14857
 */
export class CustomInput extends Component<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'ref'> & CustomInputProps> {
    private readonly registerCallbacks  = (element: HTMLInputElement | null) => {
        if (element) {
            element.onchange = this.props.onChange ? this.props.onChange : null;
            element.oninput = this.props.onInput ? this.props.onInput : null;
        }
    };

    public render() {
        return <input ref={this.registerCallbacks} {...this.props} onChange={undefined} onInput={undefined} />;
    }
}

如果您发现改进此方法的方法或遇到问题，请告诉我。与 不同的是blur，change当用户按 Enter 键时也会触发该事件，并且仅当值实际更改时才会触发。

我仍在积累该CustomInput组件的经验。例如，复选框的行为很奇怪。我要么必须在处理event.target.checked程序中反转onChange，同时将值传递给复选框，checked要么在将值传递给复选框时摆脱这种反转defaultChecked，但这会打破页面上不同位置代表相同状态的几个复选框保持同步。（在这两种情况下，我都没有将onInput处理程序传递给CustomInputfor 复选框。）

Answer 4

React没有默认'onChange'事件的行为.我们在react中看到的'onChange'具有默认'onInput'事件的行为.所以回答你的问题,他们两个都没有区别.我在GitHub上提出了一个关于同样问题的问题,这是他们不得不说的:

我认为,在做出这个决定时(大约4年前？),onInput在浏览器之间不能一致地工作,并且让从其他平台上网的人感到困惑,因为他们期望"改变"事件发生在每一次改变都会激起 在React的情况下,这是一个更大的问题,因为如果你不能很快处理更改,受控输入永远不会更新,导致人们认为React被破坏了.因此,团队将其称为"改变".

回想起来,填充onInput并保留其名称而不是改变另一个事件的行为可能是一个更好的主意.但是很久以前那艘船已经航行了.我们将来可能会重新考虑这个决定,但我会鼓励你将它视为React DOM的一个怪癖(你会很快习惯).

https://github.com/facebook/react/issues/9567

此外,本文还将为默认的'onChange'提供更多见解和解决方法

https://www.peterbe.com/plog/onchange-in-reactjs

Answer 5

正如您在此处的各种评论中看到的，React 将 onChange 和 onInput 视为相同，因此，而不是争论此决定的优点。这是解决方案。

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

Answer 6

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