如何將功能性React組件綁定到類事件

Question

我試圖把我的頭圍繞功能組件和綁定。

如果我有一個看起來像這樣的功能性React組件：

const Dashboard = props => {
    const _dashboard = new _Dashboard()

    return (
        <div>
            <div className="title">Dashboard</div>
            <button>Log</button>
        </div>
    )
}

和一個看起來像這樣的類：

class _Dashboard {
    constructor() { }

    log() {
        console.log('Dashboard Log Clicked!')
    }
}

綁定按鈕單擊的正確方法是什么？

這是我嘗試過的並且不起作用

const Dashboard = props => {
    const _dashboard = new _Dashboard()

    return (
        <div>
            <div className="title">Dashboard</div>
            <button onClick={ _dashboard.log }>Log</button>
        </div>
    )
}

但我覺得我從某種意義上說缺少某種東西。

編輯：我從log（）調用中刪除了括號。 兩種方法都不會向控制台寫入任何內容。

Answer 1

您正在調用function aka _dashboard.log()而不是_dashboard.log ;

Answer 2

您只需要刪除括號即可，否則實際上是在調用該函數並將onClick綁定到該函數的結果。 如果沒有括號，則傳遞對該函數的引用。

<button onClick={_dashboard.log}>Log</button>

Answer 3

您必須編寫如下內容：

 <button onClick={_dashboard.log}>Log</button>

要么

 <button onClick={() => _dashboard.log()}>Log</button>

否則，您的代碼將立即執行且不受約束。