React: [Bug] React onChange Synthetische / Proxy-Ereignisse werden recycelt, Problem, wenn Handler entprellt wird
Wie ist das aktuelle Verhalten?
Bestätigt seit 0.14.7, passiert aber auch heute in 15.3.2.
https://jsfiddle.net/dimitar/7ktbfetb/
class Foo extends React.Component {
render(){
const handleChange = _.debounce(this.props.onChange, 500);
return <input onChange={handleChange} />
}
}
ReactDOM.render(<Foo onChange={e => console.log(e.target, e)} />, document.querySelector('div'));
Erwarten Sie, e.target zu erhalten, erhalten Sie null
ohne die Entprellung, funktioniert wie erwartet. https://jsfiddle.net/dimitar/7ktbfetb/1/
möglicherweise verwandt mit https://github.com/facebook/react/commit/3285d834402a60d241188a1deacf8250b50239cf - für https://github.com/facebook/react/blob/master/CHANGELOG.md#react -9
DimitarChristoff
Alle 3 Kommentare
Für alle, die nach einer Problemumgehung suchen, können Sie e.persist() verwenden
z.B. return <input onChange={e => handleChange(e.persist()||e)} />
DimitarChristoff
am 20. Sept. 2016
Das liegt daran, wie Entprellen funktioniert. Es wird setTimeout verwenden, um einen Aufruf an die nächste Ereignisschleife zu senden. Wie Sie angemerkt haben, bedeutet dies aufgrund des Poolings, dass React das synthetische Ereignis bereits an den Pool zurückgegeben und die Felder zurückgesetzt hat. Wenn Sie Debounce oder irgendetwas anderes verwenden, das erfordert, dass das Ereignis außerhalb des Ereignishandlers von React existiert (z. B. asynchroner Code), müssen Sie bestehen bleiben.
Dies ist so beabsichtigt, dass Sie im Moment nichts dagegen tun können. In #6190 gibt es einige Diskussionen über das mögliche Entfernen des Poolings, wodurch Ihr Code ohne explizites Persistieren funktionieren sollte.
zpao
am 21. Sept. 2016
Dies widerspricht genau den Prinzipien, die zur Lösung des Datenflusses, der Unveränderlichkeit und der Vermeidung von Nebenwirkungen aufgestellt wurden. Sie übergeben ein Objekt an eine Komponente, aber es ist nur ein Schnappschuss, der innerhalb derselben Ereignisschleife verwendet werden muss, weil Sie dem GC und Benutzern misstrauen, die versehentlich ein Leck erstellen könnten ...
Während es damals vielleicht eine gute Idee war, müssen einige von uns nur immergrüne Browser unterstützen, die zu angemessener GC fähig sind. Vielleicht kann in der Zwischenzeit, während dieser Ansatz überdacht wird, ein Flag/env var gesetzt werden, um das Pooling auszuschalten.
DimitarChristoff
am 21. Sept. 2016
Verwandte Themen
MoOx
·
3Kommentare
jvorcak
·
3Kommentare
huxiaoqi567
·
3Kommentare
zpao
·
3Kommentare
krave1986
·
3Kommentare
Hilfreichster Kommentar
Für alle, die nach einer Problemumgehung suchen, können Sie
e.persist()verwendenz.B.
return <input onChange={e => handleChange(e.persist()||e)} />