React.js:从子到父的onClick函数

Question

我以这篇文章为例(React方式),但它对我不起作用.请指出我的错误,因为我无法理解什么是错的.

这是我看到的错误:

未捕获的TypeError:this.props.onClick不是函数

这是我的代码:

// PARENT
var SendDocModal = React.createClass({
  getInitialState: function() {
    return {tagList: []};
  },
  render: function() {
    return (
      <div>
        {
          this.state.tagList.map(function(item) {
            return (
              <TagItem nameProp={item.Name} idProp={item.Id} onClick={this.HandleRemove}/>
            )
          })
        }
      </div>
    )
  },
  HandleRemove: function(c) {
    console.log('On REMOVE = ', c);
  }
});

// CHILD
var TagItem = React.createClass({
  render: function() {
    return (
      <span className="react-tagsinput-tag">
        <span>{this.props.nameProp}</span>
        <a className='react-tagsinput-remove' onClick={this.HandleRemove}></a>
      </span>
    )
  },
  HandleRemove: function() {
    this.props.onClick(this);
  }
});

提前致谢!

Answer 1

问题是回调this内部map没有引用React组件,因此this.HandleRemove是undefined.

您可以this通过将第二个参数传递给map:

this.state.tagList.map(function() {...}, this);

现在回调this 内部指的是与回调this 外部相同的值,即SendDocModal实例.

这与React无关,它只是JavaScript的工作原理.请参阅如何在回调中访问正确的`this`上下文？了解更多信息和其他解决方案.