[英]Handling the a onClick event in React
I'm using the following component to display a list of images in React. 我正在使用以下组件在React中显示图像列表。
class Viewer extends React.Component{
constructor(props){
super(props);
this.state = {
images : ImageList
};
}
render(){
return (
<div className="row">
<div className="image-viewer">
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.mediaId}><a href="#"><img src={image.src}
className="img-responsive img-rounded img-thumbnail"
alt={image.mediaId}/></a></li>);
})}
</ul>
</div>
</div>
);
}
}
I want to trap the onClick
event on an image to do some processing, like apply a CSS to put an overlay. 我想在图像上捕获onClick
事件以进行一些处理,例如应用CSS放置叠加层。 How do I do this in React. 我如何在React中做到这一点。 Please understand I'm rank new to React. 请理解我是React的新手。
If you update your component to have onClick={this.onImageClick.bind(this, image.mediaId)
you can then handle the onClick plus know which image it was that was clicked, save that on state, and use it to apply a className to the image on render (if that's what it is that you want!). 如果您更新组件以使其具有onClick={this.onImageClick.bind(this, image.mediaId)
,则可以处理onClick并知道单击了哪个图像,将其保存在状态中,并使用它来应用className渲染上的图像(如果这就是您想要的!)。
So something like this: 所以像这样:
{this.state.images.map(function (image) {
return (<li key={image.mediaId} className={this.state.activeImage === image.mediaId ? 'active' : undefined}><a href="#" onClick={this.onClick.bind(this, image.mediaId)}><img src={image.src} className="img-responsive img-rounded img-thumbnail" alt={image.mediaId}/></a></li>);
})}
And then onClick handler - 然后onClick处理程序-
onClick: function (mediaId) {
this.setState({activeImage: mediaId});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.