Was sind die Unterschiede zwischen diesen beiden Funktionen in ReactJs render()?

Question

In meiner render() Funktion, ich möchte eine Funktion wie folgt auszuführen:

<a onClick={handleClickEdit(record.productId)}>Edit</a> 

Die Funktion handleClickEdit (id) wird ausgeführt, wenn die Komponente machen, das ist nicht, was ich will. Ich möchte handleClickEdit (id) ausführen, wenn ich auf das Label Bearbeiten klicke. Also habe ich versucht, eine Menge Zeit, ich unten Stil gefunden gut gearbeitet wird:

<a onClick={() =>handleClickEdit(record.productId)}>Edit</a> 

Was die diffences zwischen diesem Code ist? Tipps helfen, vielen Dank.

Answer 1

onClick ist eine Funktion, die immer dann aufgerufen wird, wenn auf die Komponente geklickt wird. Der ihm zugewiesene Wert muss eine Funktion sein.

Der Ausdruck () => myFunction(arg) wraps myFunction in einer anonymen Funktion; es entspricht:

function(){ return myFunction(arg); } 

Wenn die anonyme Funktion ausgeführt wird, myFunction mit arg als Argument aufgerufen wird. Wenn Sie die anonyme Funktion onClick zuweisen, wird myFunction(arg) immer ausgeführt, wenn auf die Komponente geklickt wird. Der von myFunction zurückgegebene Wert ist irrelevant. Dies geschieht im zweiten (funktionierenden) Code-Snippet.

Im ersten Code-Snippet ist myFunction(arg) direkt onClick zugeordnet. Aber myFunction(arg) ist keine Funktion — es ist eine Funktion Aufruf; myFunction wird sofort mit arg als Argument ausgeführt, und der zurückgegebene Wert wird onClick zugewiesen. Der zurückgegebene Wert ist möglicherweise nicht einmal eine Funktion!

Wenn Sie den Pfeil-Notation/explizite Wrapper-Funktion nicht verwenden möchten, können Sie verwenden:

onClick={ myFunction.bind(null, arg) } 

Sie können mehr über Function.prototype.bindhere lesen; Es gibt eine neue Funktion mit arg gebunden als das erste Argument zurück. Das erste an bind übergebene Argument wird während der Ausführung der Funktion an das Schlüsselwort this gebunden.