我正在使用以下组件在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>
);
}
}
我想在图像上捕获onClick
事件以进行一些处理,例如应用CSS来放置叠加层。我如何在React中执行此操作。请理解我是React的新手。
答案 0 :(得分:0)
如果您将组件更新为onClick={this.onImageClick.bind(this, image.mediaId)
,则可以处理onClick并知道单击了哪个图像,将其保存在状态中,并使用它将className应用于渲染时的图像(如果这就是你想要的东西!)。
这样的事情:
{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>);
})}
然后onClick处理程序 -
onClick: function (mediaId) {
this.setState({activeImage: mediaId});
}