Warum löst eine onClick-Funktion beim Rendern in React aus und wie kann man dies verhindern?

Warum wird eine onClick-Funktion beim Rendern in React ausgelöst und wie kann man dies verhindern?

Beim Übergeben einer Liste von Objekten und einer Löschfunktion zu einer untergeordneten Komponente hinzufügen und eine .map()-Funktion zum Anzeigen der Objekte verwenden, wurde festgestellt, dass die onClick-Funktion der Schaltfläche während des Renderns ausgelöst wird, was nicht passieren sollte.

Um dieses Problem zu beheben und zu verhindern, dass die onClick-Funktion ausgelöst wird beim Rendern:

Erklärung:

Im Originalcode wird der onClick-Ereignishandler direkt aufgerufen, anstatt als Referenz an die Funktion übergeben zu werden. Dies bedeutet, dass die Funktion ausgeführt wird, wenn die Komponente gerendert wird, und nicht, wenn auf die Schaltfläche geklickt wird.

Lösung:

Um dieses Problem zu beheben, verwenden Sie eine Pfeilfunktion wie also:

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

Mit den in ES6 eingeführten Pfeilfunktionen können Sie anonyme Funktionen definieren, ohne das Funktionsschlüsselwort explizit deklarieren zu müssen. In diesem Fall wird die Pfeilfunktion erst aufgerufen, wenn auf die Schaltfläche geklickt wird, wodurch verhindert wird, dass die onClick-Funktion beim Rendern ausgelöst wird.

Das obige ist der detaillierte Inhalt vonWarum löst eine onClick-Funktion beim Rendern in React aus und wie kann man dies verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!