Wir verwenden das Backbone + ReactJS-Bundle, um eine clientseitige App zu erstellen. valueLink
Wir verlassen uns stark auf berüchtigte Daten und geben sie über einen eigenen Wrapper, der die ReactJS-Schnittstelle für die bidirektionale Bindung unterstützt, direkt an das Modell weiter.
Jetzt standen wir vor dem Problem:
Wir haben ein jquery.mask.js
Plugin, das den Eingabewert programmgesteuert formatiert, damit keine React-Ereignisse ausgelöst werden. All dies führt zu einer Situation, in der das Modell unformatierte Werte von Benutzereingaben empfängt und formatierte vom Plugin verfehlt .
Es scheint, dass React je nach Browser viele Strategien zur Ereignisbehandlung hat. Gibt es eine übliche Möglichkeit, ein Änderungsereignis für ein bestimmtes DOM-Element auszulösen, damit React es hört?
Antworten:
Für Reaktion 16 und Reaktion> = 15,6
Setter
.value=
funktioniert nicht wie gewünscht, da die React-Bibliothek den Eingabewerte-Setter überschreibt, aber wir können die Funktion direkt iminput
as-Kontext aufrufen .Für TextArea- Elemente sollten Sie
prototype
vonHTMLTextAreaElement
Klasse.Neues Codepen-Beispiel .
Alle Credits für diesen Mitwirkenden und seine Lösung
Veraltete Antwort nur für React <= 15.5
Mit können
react-dom ^15.6.0
Sie dassimulated
Flag für das Ereignisobjekt verwenden, damit das Ereignis durchlaufen wirdIch habe einen Codepen mit einem Beispiel gemacht
Um zu verstehen, warum eine neue Flagge benötigt wird, fand ich diesen Kommentar sehr hilfreich:
quelle
Zumindest bei Texteingaben scheint es, dass
onChange
auf Eingabeereignisse gewartet wird:quelle
Event
wird nicht unterstützt IE https://developer.mozilla.org/en-US/docs/Web/API/Event/Eventvar event = document.createEvent('CustomEvent'); event.initCustomEvent('input', true, false, { });
, aber ich habe keine IE9-VM zur Hand.var evt = document.createEvent('CustomEvent'); evt.initCustomEvent('input', true, false, { }); document.getElementById('description').value = 'I changed description'; document.getElementById('description').dispatchEvent(evt);
Ich weiß, dass diese Antwort etwas spät kommt, aber ich hatte kürzlich ein ähnliches Problem. Ich wollte ein Ereignis für eine verschachtelte Komponente auslösen. Ich hatte eine Liste mit Widgets vom Typ Radio und Kontrollkästchen (es handelte sich um Divs, die sich wie Kontrollkästchen und / oder Optionsfelder verhielten), und an einer anderen Stelle in der Anwendung musste ich eines deaktivieren, wenn jemand eine Toolbox schloss.
Ich habe eine ziemlich einfache Lösung gefunden, nicht sicher, ob dies die beste Vorgehensweise ist, aber sie funktioniert.
Dies löste das Klickereignis auf dem domNode aus und mein über reag angehängter Handler wurde tatsächlich aufgerufen, sodass er sich so verhält, wie ich es erwarten würde, wenn jemand auf das Element klickt. Ich habe onChange noch nicht getestet, aber es sollte funktionieren, und ich bin mir nicht sicher, wie dies in wirklich alten IE-Versionen funktionieren wird, aber ich glaube, dass das MouseEvent in mindestens IE9 und höher unterstützt wird.
Ich habe mich schließlich für meinen speziellen Anwendungsfall davon entfernt, weil meine Komponente sehr klein war (nur ein Teil meiner verwendeten Anwendung reagiert, da ich sie noch lerne) und ich das Gleiche auf andere Weise erreichen konnte, ohne Verweise auf Dom-Knoten zu erhalten.
AKTUALISIEREN:
Wie andere in den Kommentaren angegeben haben, ist es besser
this.refs.refname
, einen Verweis auf einen Dom-Knoten zu erhalten. In diesem Fall ist refname die ref, über die Sie Ihre Komponente angehängt haben<MyComponent ref='refname' />
.quelle
React.findDOMNode
Funktion verwenden. goo.gl/RqccrAref
Ihrem Element ein hinzu und verwenden Sie dannthis.ref.refName.dispatchEvent
Sie können Ereignisse mit ReactTestUtils simulieren, dies ist jedoch für Unit-Tests vorgesehen.
Ich würde empfehlen, valueLink für diesen Fall nicht zu verwenden und einfach die vom Plugin ausgelösten Änderungsereignisse abzuhören und den Status der Eingabe als Antwort zu aktualisieren. Die Zwei-Wege-Bindung dient eher als Demo als alles andere. Sie sind nur in Addons enthalten, um die Tatsache hervorzuheben, dass eine reine bidirektionale Bindung für die meisten Anwendungen nicht geeignet ist und dass Sie normalerweise mehr Anwendungslogik benötigen, um die Interaktionen in Ihrer App zu beschreiben.
quelle
ReactTestUtils.Simulate.change(ReactDOM.findDOMNode(this.fieldRef))
Dies erweitert die Antwort von Grin / Dan Abramov und funktioniert über mehrere Eingabetypen hinweg. Getestet in Reaktion> = 15,5
quelle
Durch das Auslösen von Änderungsereignissen für beliebige Elemente entstehen Abhängigkeiten zwischen Komponenten, über die nur schwer nachzudenken ist. Es ist besser, sich an den One-Way-Datenfluss von React zu halten.
Es gibt kein einfaches Snippet, um das Änderungsereignis von React auszulösen. Die Logik ist in ChangeEventPlugin.js implementiert und es gibt verschiedene Codezweige für verschiedene Eingabetypen und Browser. Darüber hinaus variieren die Implementierungsdetails je nach Version von React.
Ich habe eine React-Trigger-Änderung erstellt , die das Ding macht, aber sie soll zum Testen verwendet werden, nicht als Produktionsabhängigkeit:
CodePen
quelle
Nun, da wir Funktionen verwenden, um ein Onchange-Ereignis zu behandeln, können wir dies folgendermaßen tun:
quelle
Ich fand dies bei React's Github-Problemen: Funktioniert wie ein Zauber (v15.6.2)
So habe ich eine Texteingabe implementiert:
quelle
Für
HTMLSelectElement
, dh<select>
quelle
Wenn Sie Backbone und React verwenden, würde ich eine der folgenden Empfehlungen empfehlen:
Beide helfen bei der Integration von Backbone-Modellen und -Sammlungen in React-Ansichten. Sie können Backbone-Ereignisse genauso verwenden wie Backbone-Ansichten. Ich habe in beiden dabbled und nicht viel Unterschied sehen , außer man ist ein mixin und die anderen Änderungen
React.createClass
zuReact.createBackboneClass
.quelle