Question

在我的react应用程序中，当我从动态生成的组件中调用时，我有一个onClick函数无法识别（TypeError: _this2.click is not a function）。我四处寻找功能未正确绑定的问题，但事实似乎如此。这是代码：

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;
  }

}

Answer 1

在您的构造函数中更正此this.click = this.click(this); 到this.click = this.click.bind(this);

Answer 2

正如Vikas回答的那样，您可以采用该方法，也可以对函数使用箭头语法，而无需绑定函数。例如。点击=（Id）=> {

}。

Answer 3

最简单方便的方法是使用箭头函数，因此您不再需要在构造函数中进行绑定，这很容易，不是吗？

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

UserControl

并将您的功能更改为：

TaskListControl

无法识别反应功能

3 个答案: