无法绑定任何东西：“无法调用未定义的方法“绑定””答案

【问题标题】：Can't bind anything: "Cannot call method "bind" of undefined"无法绑定任何东西：“无法调用未定义的方法“绑定””
【发布时间】：2016-06-08 22:57:04
【问题描述】：

import React from 'react'

const Buttons = React.createClass({

    getInitialState() {
         return {clicks: 0}
    },

    countClicks() {
        this.setState({
            clicks: ++this.state.clicks
        })
        console.log(this.state.clicks)
    }

    render() {
        return (
            <div>
                <div onClick={console.log("HEYYY")}>This should log "HEYYY"</div>
            <div onClick=({this.countClicks()}>This should update clicks</div>

        )
    }
})

这将在第一次渲染时分别打印“HEYYY”和1，但在实际点击时不会执行任何操作。

虽然这让我有些头疼，但我在一个示例中找到了解决方案：

//Instead of doing this
<a onClick={this._changeValue(2)}>Change Value</a>

//Do this
<a onClick={this._changeValue.bind(2)}>Change Value</a>

啊，完美，我想。除了当我尝试它时，我得到一个错误：

TypeError: 无法调用未定义的“绑定”方法

我删除了简单的console.log，因为我不知道要在其中绑定什么，只使用countClicks()，当我像这样删除括号时，我确实得到了它有点的工作：

<div onClick=({this.countClicks.bind(this)})>This should update clicks</div>

首先，为什么当我有括号时我不能绑定一些东西？其次，我得到了一个丑陋的警告：

警告：bind()：您正在将组件方法绑定到组件。 React 以一种高性能的方式自动为你做这件事，所以您可以安全地移除此调用。

React 傻吗？！

还是我..？

【问题讨论】：

叶芝@Andy_D 一针见血。如果您将函数传递给单击处理程序，则它不会调用它。 () 括号调用函数。所以删除它们并只是说onClick={this.countClicks} 是你应该这样做的。并且有大量的文档
onClick 不仅仅是一个反应。它是一个已经存在很长时间的 html 属性。它的功能就像那个属性。 stackoverflow.com/questions/18680248/html-button-onclick-event ... 调用您让点击处理程序执行的函数。单击处理程序将在您单击它时调用该函数。所以不需要括号。括号执行函数，onclick处理程序不能执行被调用函数

标签： reactjs

【解决方案1】：

我自己的解决方案：

render() {
    const self = this

    <div onClick={function() { self.countClicks() }}>This should update clicks</div>
}

没有使用bind，没有错误，没有警告。

【讨论】：

您之所以在此处投反对票，很可能是因为您在完全没有必要时声明了一个内联函数。你可以做<div onClick={this.countClicks}
不，我不能。阅读问题。