React.js：onClick函数从子级到父级

Question

我用这个文章为例（做出反应的方式），但它不是为我工作。请指出我的错误，因为我不明白怎么了。

这是我看到的错误：

未捕获的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上下文？有关更多信息和其他解决方案。