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

React onClick-Funktion wird beim Rendern ausgelöst

Ein häufiges Problem tritt auf, wenn die onClick-Funktion von React innerhalb einer Komponente verwendet wird, die Daten von einer übergeordneten Komponente empfängt. Wenn die onClick-Funktion nicht ordnungsgemäß definiert ist, kann sie beim Rendern unbeabsichtigt ausgelöst werden, anstatt auf ein Klickereignis des Benutzers zu warten.

Um das Problem zu verstehen, analysieren wir den bereitgestellten Beispielcode:

var taskNodes = this.props.todoTasks.map(function(todo) {
    return (
        <div>
            {todo.task}
            <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
        </div>
    );
}, this);

Das Problem liegt im onClick-Ereignishandler. Derzeit wird this.props.removeTaskFunction(todo) direkt aufgerufen, wodurch die Funktion sofort beim Rendern ausgeführt wird. Dies ist nicht das gewünschte Verhalten, da die onClick-Funktion nur aufgerufen werden sollte, wenn auf die Schaltfläche geklickt wird.

Um dieses Problem zu beheben, sollte der Code so geändert werden, dass die Funktionsreferenz übergeben wird, anstatt sie aufzurufen:

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

Durch die Verwendung einer Pfeilfunktion wird sichergestellt, dass die „removeTaskFunction“ nicht sofort aufgerufen wird, sondern auf die Ausführung eines Benutzerklickereignisses wartet. Pfeilfunktionen wurden in ES6 eingeführt und werden in React 0.13.3 oder höher unterstützt.

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