Ich habe versucht, nach einer Antwort darauf zu suchen, aber die meisten von ihnen befinden sich außerhalb des Kontextes von React, onChange
bei dem Unschärfe ausgelöst wird.
Bei der Durchführung verschiedener Tests kann ich nicht sagen, wie unterschiedlich diese beiden Ereignisse sind (wenn sie auf einen Textbereich angewendet werden). Kann jemand etwas Licht ins Dunkel bringen?
javascript
reactjs
dom-events
ffxsam
quelle
quelle
onChange
). Und nein, das Einfügen von Text in einen Textbereich (in React) löst sowohlonChange
als auch ausonInput
. Fühlen Sie sich frei, in einer Geige zu testen und Sie werden sehen.onChange
würde vielleicht auslösen undonInput
nicht, aber beide werden ausgelöst.Antworten:
Es scheint keinen wirklichen Unterschied zu geben
Reagieren Sie aus irgendeinem Grund Listener für
Component.onChange
das DOM-element.oninput
Ereignis. Siehe den Hinweis in den Dokumenten zu Formularen:Reagieren Sie Dokumente - Formulare
Es gibt mehr Menschen, die von diesem Verhalten überrascht sind. Weitere Informationen finden Sie in diesem Problem im React Issue Tracker:
Dokumentieren Sie, wie sich onChange von React auf onInput # 3964 bezieht
Zitat aus den Kommentaren zu diesem Thema:
Ich stimme dem Kommentar zu 100% zu ... Aber ich denke, eine Änderung würde jetzt mehr Probleme bringen als lösen, da bereits so viel Code geschrieben wurde, der auf diesem Verhalten beruht.
React ist nicht Teil der offiziellen Web-API-Sammlung
Obwohl React auf JS aufbaut und eine enorme Akzeptanzrate aufweist, gibt es eine Technologie, mit der React eine ganze Reihe von Funktionen unter seiner eigenen (relativ kleinen) API verbirgt. Ein Bereich, in dem dies offensichtlich ist, befindet sich im Ereignissystem, in dem unter der Oberfläche viel los ist, was sich grundlegend vom Standard-DOM-Ereignissystem unterscheidet. Nicht nur in Bezug darauf, welche Ereignisse was tun, sondern auch in Bezug darauf, wann Daten in welcher Phase der Ereignisbehandlung bestehen bleiben dürfen. Mehr dazu lesen Sie hier:
Reagieren Sie auf das Ereignissystem
quelle
Es gibt keinen Unterschied
React hat nicht das Verhalten des Standardereignisses 'onChange'. Das 'onChange', das wir in react sehen, hat das Verhalten des Standardereignisses 'onInput'. Um Ihre Frage zu beantworten, gibt es keinen Unterschied zwischen beiden. Ich habe auf GitHub ein Problem bezüglich derselben angesprochen, und dies ist, was sie dazu zu sagen haben:
https://github.com/facebook/react/issues/9567
Auch dieser Artikel bietet mehr Einblick. Als Problemumgehung für das Fehlen von "onChange" schlägt der Artikel vor, das Ereignis "onBlur" anzuhören.
https://www.peterbe.com/plog/onchange-in-reactjs
quelle
Kürzlich habe ich einen Fehler bekommen, bei dem
onChange
das Kopieren und Einfügen in das Eingabefeld von IE11 nicht möglich war. Während dasonInput
Ereignis dieses Verhalten erlauben würde. Ich konnte keine Dokumentation finden, die dies in den Dokumenten beschreiben würde, aber das zeigt, dass es einen Unterschied zwischen den beiden gibt (erwartet oder nicht).quelle
Wie Sie in verschiedenen Kommentaren hier sehen können, behandelt React onChange und onInput gleich und so, anstatt die Vorzüge dieser Entscheidung zu diskutieren. Hier ist die Lösung.
Verwenden Sie onBlur, wenn Sie die Änderungen des Benutzers erst verarbeiten möchten, wenn sie abgeschlossen sind. :) :)
quelle
Für alle, die über dieses Problem gestolpert sind und nach einer Möglichkeit suchen, auf das tatsächliche, DOM-basierte
change
Ereignis zu hören, habe ich es so gemacht (geschrieben in 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} />; } }
Bitte lassen Sie mich wissen, wenn Sie Möglichkeiten zur Verbesserung dieses Ansatzes oder Probleme damit sehen. Im Gegensatz dazu
blur
wird daschange
Ereignis auch ausgelöst, wenn der Benutzer die Eingabetaste drückt, und wird nur ausgelöst, wenn sich der Wert tatsächlich geändert hat.Ich sammle immer noch Erfahrungen mit dieser
CustomInput
Komponente. Zum Beispiel verhalten sich Kontrollkästchen seltsam. Ich muss entwederevent.target.checked
imonChange
Handler invertieren, während ich den Wert an das Kontrollkästchen mit übergebe,checked
oder diese Inversion entfernen, wenn ich den Wert an das Kontrollkästchen mit übergebe,defaultChecked
aber dies führt dazu, dass mehrere Kontrollkästchen, die denselben Status an verschiedenen Stellen auf der Seite darstellen, synchron bleiben . (In beiden Fällen habe ich keinenonInput
Handler an dieCustomInput
Kontrollkästchen für übergeben.)quelle
Ein Unterschied scheint zu sein, dass
onChange
beim Auswählen und Ersetzen eines Zeichens durch dasselbe Zeichen nicht ausgelöst wird, solange dies der FallonInput
ist.Siehe diese Sandbox: https://codesandbox.io/s/react-onchange-vs-oninput-coggf?file=/src/App.js
onChange
und 2onInput
.onInput
Ereignis ausgelöst wird , aber neinonChange
.quelle