小编典典

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

reactjs

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

这是我看到的错误:

未捕获的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);
  }
});

提前致谢!


阅读 338

收藏
2020-07-22

共1个答案

小编典典

问题在于回调this内部map不引用React组件,因此this.HandleRemoveundefined

您可以this通过将第二个参数传递给来显式设置值map

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

现在,回调this 内部 的值与回调this 外部 (即SendDocModal实例)的值相同。

这与React无关,这只是JavaScript的工作方式。请参阅如何在回调中访问正确的this上下文?有关更多信息和其他解决方案。

2020-07-22