这样写每回点击删除都会产生一个li
让他不产生又会报错,如果给他父级加getInitialState的话有只有一次,请问该如何解决
var ProductionSectionBox=React.createClass({
getInitialState : function(){
return {
flay : true
}
},
ChangeDevice : function(){
this.setState({flay: !this.state.flay});
},
render : function(){
var filterArr=this.props.data;
var key=this.props.key;
if(this.state.flay){
return (
<li key={key}>
{filterArr}
<ProductionSectiontool flay={this.ChangeDevice}/>
</li>
)
}else{
return (
<li></li>
)
}
}
})
//删除的代码
var ProductionSectiontool=React.createClass({
handleremove : function(){
this.props.flay();
},
render :function(){
return(
<ul className="tool">
<li><i className="iconfont"></i></li>
<li><i className="iconfont"></i></li>
<li onClick={this.handleremove}><i className="iconfont"></i></li>
</ul>
)
}
})
原先我也碰到过类似的错误,就是返回正确DOM和返回空。
你可以
return null //这样做的话react默认会返回一个<span></span>标签
或是直接返回:
return <span></span>
<ProductionSectiontool flay={this.ChangeDevice}/>
应写为
<ProductionSectiontool flay={this.ChangeDevice.bind(this)}/>
因为这方法里用了this,如不绑定this.setState将报错