我用这个文章为例(做出反应的方式),但它不是为我工作。请指出我的错误,因为我不明白怎么了。
这是我看到的错误:
未捕获的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); } });
提前致谢!
问题在于回调this内部map不引用React组件,因此this.HandleRemove是undefined。
this
map
this.HandleRemove
undefined
您可以this通过将第二个参数传递给来显式设置值map:
this.state.tagList.map(function() {...}, this);
现在,回调this 内部 的值与回调this 外部 (即SendDocModal实例)的值相同。
SendDocModal
这与React无关,这只是JavaScript的工作方式。请参阅如何在回调中访问正确的this上下文?有关更多信息和其他解决方案。