反应 onClick 不触发功能
react onClick not triggering function
我有这个子组件,它生成列表元素,其中包含一个图像和一个标签中的 2 个图标。
return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={this.showBild} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li>
这个return是从父组件传过来的prop的map函数return
onClick 事件没有触发我的 showBild 函数。
我是不是漏掉了什么?
这是我的整个反应代码,包括父子组件(showBild class 可以忽略)
<script type="text/jsx">
var Bilder = React.createClass({
getInitialState: function() {
return {
data:[
['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
['5', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg']
],
currentPic:[],
display:'showBild clearfix dn'
};
},
bild: function(){
},
render: function() {
return (
<div>
<SingleBild data={this.state.data} chosenBild={this.bild} />
<BildDetail data={this.state.currentPic} display={this.state.display} />
</div>
);
}
});
var SingleBild = React.createClass({
getInitialState: function() {
return {
bild:[]
};
},
showBild: function(e){
e.preventDefault();
alert("yolo");
this.props.chosenBild(this.state.bild);
},
render: function() {
var displayBild = function(bild){
return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={this.showBild} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li>
};
return (
<ul className="dashboardUl bilder clearfix">
<h2>Gemeldete Bilder:</h2>
{this.props.data.map(displayBild)}
</ul>
);
}
});
var BildDetail = React.createClass({
render: function() {
return (
<div className={this.props.display}>
<img src={this.props.data[1]} alt="" />
<ul>
<li><a href="#"><i className="fa fa-trash-o"></i></a></li>
<li><a href="#"><i className="fa fa-ban"></i></a></li>
</ul>
</div>
);
}
});
React.render(<Bilder />, document.getElementById('bilder'));
</script>
在BildDetail
的render
方法中,需要引用this
关键字或者绑定。例如:
render: function() {
var self = this;
var displayBild = function(bild){
return <li>...<a onClick={self.showBild} ....</a></li>
};
return (
....
);
}
或者你可以绑定它:
render: function() {
var displayBild = function(bild){
return <li>...<a onClick={this.showBild} ....</a></li>
}.bind(this);
return (
....
);
}
我有这个子组件,它生成列表元素,其中包含一个图像和一个标签中的 2 个图标。
return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={this.showBild} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li>
这个return是从父组件传过来的prop的map函数return
onClick 事件没有触发我的 showBild 函数。
我是不是漏掉了什么?
这是我的整个反应代码,包括父子组件(showBild class 可以忽略)
<script type="text/jsx">
var Bilder = React.createClass({
getInitialState: function() {
return {
data:[
['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],
['5', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg']
],
currentPic:[],
display:'showBild clearfix dn'
};
},
bild: function(){
},
render: function() {
return (
<div>
<SingleBild data={this.state.data} chosenBild={this.bild} />
<BildDetail data={this.state.currentPic} display={this.state.display} />
</div>
);
}
});
var SingleBild = React.createClass({
getInitialState: function() {
return {
bild:[]
};
},
showBild: function(e){
e.preventDefault();
alert("yolo");
this.props.chosenBild(this.state.bild);
},
render: function() {
var displayBild = function(bild){
return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={this.showBild} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li>
};
return (
<ul className="dashboardUl bilder clearfix">
<h2>Gemeldete Bilder:</h2>
{this.props.data.map(displayBild)}
</ul>
);
}
});
var BildDetail = React.createClass({
render: function() {
return (
<div className={this.props.display}>
<img src={this.props.data[1]} alt="" />
<ul>
<li><a href="#"><i className="fa fa-trash-o"></i></a></li>
<li><a href="#"><i className="fa fa-ban"></i></a></li>
</ul>
</div>
);
}
});
React.render(<Bilder />, document.getElementById('bilder'));
</script>
在BildDetail
的render
方法中,需要引用this
关键字或者绑定。例如:
render: function() {
var self = this;
var displayBild = function(bild){
return <li>...<a onClick={self.showBild} ....</a></li>
};
return (
....
);
}
或者你可以绑定它:
render: function() {
var displayBild = function(bild){
return <li>...<a onClick={this.showBild} ....</a></li>
}.bind(this);
return (
....
);
}