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>

否则您的代码将立即执行而不受约束。

如何将功能React组件绑定到类事件

3 个答案: