Ich übergebe 2 Werte an eine untergeordnete Komponente:
- Liste der anzuzeigenden Objekte
- Löschfunktion.
Ich verwende eine .map () -Funktion, um meine Liste von Objekten anzuzeigen (wie in dem Beispiel auf der Seite mit dem Reaktions-Tutorial), aber die Schaltfläche in dieser Komponente löst die onClick
Funktion beim Rendern aus (sie sollte beim Rendern nicht ausgelöst werden). Mein Code sieht folgendermaßen aus:
module.exports = React.createClass({
render: function(){
var taskNodes = this.props.todoTasks.map(function(todo){
return (
<div>
{todo.task}
<button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
</div>
);
}, this);
return (
<div className="todo-task-list">
{taskNodes}
</div>
);
}
});
Meine Frage ist: Warum wird die onClick
Funktion beim Rendern ausgelöst und wie kann sie nicht ausgelöst werden?
javascript
reactjs
button
onclick
dom-events
Stralos
quelle
quelle
onClick={() => this.props.removeTaskFn(todo)}
Binden Sie den Wert an die Funktion, anstatt die Funktion aufzurufen:
MDN-Referenz: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
quelle
Der Wert für Ihr
onClick
Attribut sollte eine Funktion sein, kein Funktionsaufruf.quelle
Für diejenigen, die keine Pfeilfunktionen verwenden, aber etwas Einfacheres ... Ich habe dies beim Hinzufügen von Klammern nach meiner signOut-Funktion festgestellt ...
Ersetzen Sie diese
<a onClick={props.signOut()}>Log Out</a>
damit
<a onClick={props.signOut}>Log Out</a>
...! 😆quelle
JSX wird mit ReactJS verwendet, da es HTML sehr ähnlich ist und Programmierern das Gefühl gibt, HTML zu verwenden, während es letztendlich in eine Javascript-Datei transpiliert wird.
Verwenden -
was bedeutet-
quelle
JSX wird auswerten JavaScript-Ausdrücke in geschweiften Klammern aus
In diesem Fall,
this.props.removeTaskFunction(todo)
wird aufgerufen und der Rückgabewert zugewiesenonClick
Was Sie bereitstellen müssen,
onClick
ist eine Funktion. Dazu können Sie den Wert in eine anonyme Funktion einschließen.quelle
Ich hatte ein ähnliches Problem, mein Code war:
Wo es sein sollte
in RenderRadioInput
Es hat das Problem für mich behoben.
quelle