React JS 事件監聽器

Question

我想清楚地了解這之間有什么區別：

...
 <button onClick={(e)=>anyFunction(e)}>Click Me<button>
...

和

...
 <button onClick={anyFunction}>Click Me<button>
...

它們的工作方式相同，沒問題。 在第二個示例中，anyFunction 仍然可以訪問事件目標，盡管沒有授予它。 但是，有什么區別？ 謝謝！

Answer 1

這與反應沒有那么多，但與普通的javascript。 在 javascript 中，您可以將函數傳遞為 arguments，請考慮：

const a = () => 'a function'
const b = fn => fn()

const c = b(() => a()) // 'a function'
const d = b(a) // 'a function'

正如我們在這個例子中看到的那樣。 C和 d 示例的工作方式相同。 Const B收到 function 並執行此操作。 On the C example we're giving B an anonymous function that executes A , however, on the D example we're giving a reference (typeof a === function), in that way D satisfies B arguments which is 'receive an function並執行'。

回到反應示例， onClick 屬性返回一個 function ，它返回合成事件（ e ），所以我們有這個：

onClick -> fn -> e

如果你傳遞一個接收 e 的 function 參考，你最終會得到這樣的結果：

onClick -> yourFn(fn -> e)

這樣onClick的返回結果就交給了你的fn。