Warum wird meine React onClick-Funktion beim Rendern ausgelöst?

React onClick-Funktion beim Rendern auslösen

Beim Erstellen von React-Komponenten, die Listen von Objekten rendern, ist es üblich, sowohl die Objekte als auch eine Funktion zu übergeben für das Löschen als Requisiten. Während die Verwendung von .map() zum Durchlaufen der Objekte Standard ist, kann dies dazu führen, dass die onClick-Funktion beim Rendern vorzeitig ausgelöst wird.

Im bereitgestellten Code rührt das Problem von der Tatsache her, dass die „removeTaskFunction“ direkt aufgerufen wird im onClick-Ereignishandler. Dies bedeutet, dass die Funktion ausgeführt wird, sobald die Komponente gerendert wird, und nicht, wenn auf die Schaltfläche geklickt wird.

Lösung

Um dieses Problem zu beheben, sollte die Funktion übergeben werden als Pfeilfunktion für onClick, um sicherzustellen, dass sie nicht vorzeitig aufgerufen wird. Die korrigierte Zeile sollte wie folgt aussehen:

<button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>Submit</button>

Pfeilfunktionen, die in ES6 eingeführt wurden, verzögern die Ausführung, bis die Funktion aufgerufen wird. In React 0.13.3 oder höher werden Pfeilfunktionen vollständig unterstützt. Durch die Verwendung einer Pfeilfunktion wird der onClick-Handler nur dann ausgelöst, wenn tatsächlich wie beabsichtigt auf die Schaltfläche geklickt wird.

Das obige ist der detaillierte Inhalt vonWarum wird meine React onClick-Funktion beim Rendern ausgelöst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!