Das SyntheticEvent wird gepoolt. Dies bedeutet, dass das SyntheticEvent-Objekt erneut verwendet wird und alle Eigenschaften nach dem Aufruf des Ereignisrückrufs ungültig gemacht werden. Dies ist aus Leistungsgründen. Daher können Sie nicht asynchron auf das Ereignis zugreifen.Was reagiert das Ereignispooling?
verweisen: Event System in React
Es bedeutet, dass die Eigenschaften des Ereignisses existieren nur während der Rückruf aktiv ist. Das Hinzufügen von Async zu der Mischung oder das Speichern des Ereignisses für die zukünftige Verwendung schlägt fehl.
Dies wird leicht beobachtet, wenn Sie console.log(event) in einem Event-Handler versuchen. Wenn Sie das Objekt untersuchen, werden die meisten Eigenschaften des Ereignisobjekts null sein. Wenn Sie die Ausführung des Skripts mit debugger; sofort nach dem Protokollieren des Werts anhalten, können Sie die Werte überprüfen.
class MyComponent extends React.Component {
handleClick (e){
console.log('The event currentTarget is', e.currentTarget); // DOM element
setTimeout(() => {
console.log('event.currentTarget was', e.currentTarget); // null
}, 1000)
}
render() {
return <button onClick={this.handleClick}>Fire event!</button>
}
}
Dies wird ein DOM-Element einloggen, wenn Sie auf die Schaltfläche klicken, und null eine Sekunde später. Aus Gründen, die über mich hinausgehen, wird event.target immer noch gespeichert, bis das nächste Ereignis eintritt und nicht annulliert wird.
Die Antwort scheint in diesem Zitat zu sein ... – nnnnnn
aber ich kann nicht verstehen. Kann die Aussage für einen Neuling wie mich nicht viel einfacher zu verstehen sein? –
Wenn ein SyntheticEvent-Objekt benötigt wird, verwendet das System ein altes Objekt, anstatt ein neues Objekt zu erstellen. Wenn Sie nicht verstehen, was Sie über asynchrone Operationen sagen, sollten Sie einige allgemeine Tutorials über asynchrone Funktionen lesen und dieses Wissen dann auf dieses spezielle Thema anwenden. – nnnnnn