Reactjs 未识别反应功能

在我的react应用程序中，当从动态生成的组件调用时，我有一个未被识别的

onClick

函数（

TypeError:_this2.click不是函数

）。我四处寻找函数绑定不正确的问题，但它们似乎是正确的。代码如下：

class C extends React.Component {

  constructor(props) {
    super(props);


    // Bind components
    this.eventComponent = this.eventComponent.bind(this);
    this.click = this.click(this);
  }

  /**
   * Click function for when a user selects their choice
   * @param  {[int]} id [id of the event the user is selecting]
   */
  click(id) {
    console.log(id)
  }

  /**
   * Draws an event component (dynamically generated)
   * @param  {[String]} name    [name of the event]
   * @param  {[String]} summary [summary of event]
   * @return {[Object]}         [react element of an event]
   */
  eventComponent(name, summary, id) {
    if (name != null && summary != null) {
      return (
        <div >
          <h1>{name}</h1>
          <p>{summary}</p>
          <button onClick={() => this.click(id)}>Here is a button!</button>
        </div>
        );
    }

  }


  render() {

    var event = this.state.event

    var objArray = this.state.objArray

    var eventMap;

    if (event) {
      eventMap = objArray.map(function(event) {
        // Get first property
        var firstProp;
        var k;
        for(var key in event) {
            if(event.hasOwnProperty(key)) {
                firstProp = event[key];
                k = key;
                break;
            }
        }
        return this.eventComponent(firstProp.title, firstProp.summary, k);
      }.bind(this))
    } else {
      eventMap = <p>No events found!</p>;
    }

    // Generate a default HTML object
    var eventComponent = (
      <div>
          {eventMap}
      </div>
    );

    return eventComponent;
  }

}

C类扩展了React.Component{
建造师（道具）{
超级（道具）；
//绑定组件
this.eventComponent=this.eventComponent.bind（this）；
this.click=this.click（这个）；
}
/**
*当用户选择他们的选择时，单击函数
*@param{[int]}id[用户正在选择的事件的id]
*/
单击（id）{
控制台日志（id）
}
/**
*绘制事件组件（动态生成）
*@param{[String]}name[事件名称]
*@param{[String]}摘要[事件摘要]
*@return{[Object]}[react事件元素]
*/
eventComponent（名称、摘要、id）{
if（name！=null&&summary！=null）{
返回(
{name}
{摘要}

点击（id）}>这里有一个按钮！
);
}
}
render（）{
var event=this.state.event
var objArray=this.state.objArray
var事件图；
如果（事件）{
eventMap=objArray.map（函数（事件）{
//获取第一个属性
var firstProp；
var-k；
for（事件中的var键）{
if（event.hasOwnProperty（key））{
firstProp=事件[键]；
k=键；
打破
}
}
返回此.eventComponent（firstProp.title，firstProp.summary，k）；
}.绑定（本）
}否则{
eventMap=未找到任何事件！
；
}
//生成默认的HTML对象
var eventComponent=(
{eventMap}
);
返回事件组件；
}
}

在构造函数中更正此

this.click=this.click（此）
to
this.click=this.click.bind（this）在构造函数中更正此
this.click=this.click（此）
to
this.click=this.click.bind（this）
由Vikas回答，
您可以采用这种方法，也可以对函数使用箭头语法，使用箭头语法就无需绑定函数。
如。
单击=（Id）=>{

}.
正如维卡斯所回答的，
您可以采用这种方法，也可以对函数使用箭头语法，使用箭头语法就无需绑定函数。
如。
单击=（Id）=>{

}.
最简单、最方便的方法是使用箭头函数，这样您就不需要在构造函数中进行绑定了，不是吗

因此，只需从构造函数中删除此项：

this.click = this.click.bind(this);

并将您的功能更改为：

click = (id) => {
    console.log(id)
  }

最简单方便的方法是使用箭头函数，这样就不需要在构造函数中进行绑定了，是不是容易多了

因此，只需从构造函数中删除此项：

this.click = this.click.bind(this);

并将您的功能更改为：

click = (id) => {
    console.log(id)
  }

应该是
this.click.bind（this）
应该是
this，点击.bind（this）