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

【问题标题】：How to bind functional React component to class events如何将功能性 React 组件绑定到类事件
【发布时间】：2016-03-01 00:41:46
【问题描述】：

我正试图围绕功能组件和绑定。

如果我有一个看起来像这样的功能性 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() 调用中删除了括号。两种方式都不会向控制台写入任何内容。

【问题讨论】：

您能在开发工具中检查 _dashboard 的值吗？（行：）
看起来 _dashboard 并没有被实例化。将console.log('test') 添加到_Dashboard 类永远不会被调用
试试这个._dashboard？还有 console.log('test');如果你想看的话，IMO 应该在类的 componentWillMount() 或 componentDidMount() 上。顺便说一句，您是否遇到任何控制台错误？
顺便说一句；尝试用 "替换你的行： "" >” 。如果这没有运行，那么您的问题与正确绑定按钮 onClick 事件不同。
好的，看起来还有其他事情发生，因为<button onClick={ () => { console.log('test'); } }>Log</button> 也没有做任何事情。回到绘图板。哈哈。最奇怪的是没有错误。一切都很好。

标签： javascript reactjs ecmascript-6

【解决方案1】：

您调用的是function aka _dashboard.log() 而不是_dashboard.log ;

【讨论】：

& 如果你需要将它绑定到按钮，你会写 ::_dashboard.log;或 _dashboard.log.bind(this); （例如，假设您需要与该按钮关联的值）。

【解决方案2】：

您只需要删除括号，否则您实际上是在调用函数并将onClick 绑定到该函数的结果。如果没有括号，则传递对函数的引用。

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

【讨论】：

【解决方案3】：

你必须写这样的东西：

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

或

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

否则您的代码将立即执行而不是绑定。

【讨论】：