[英]ReactJS Pass key with an onClick function
我有一个图库,在其中循环显示槽形图像对象,并且要将i
传递给onClick函数。 这是我的图库代码:
<div className="gallery clearfix">
{ block.gallery.map((item, i) => (
i < 1 ?
<div className="gallery-image" key={i} onClick={this.toggle}>
<a href='' className="inner">
<img src={item.images.thumbnail_sm} alt={block.title} srcSet={`${item.images.thumbnail_md} 1x, ${item.images.thumbnail_lg} 2x`} className="img-fluid image"/>
</a>
</div>
: null
))}
<div className="gallery-thumbs">
<div className="row">
{ block.gallery.map((item, i) => (
i > 0 && i < (limit + 1) ?
<div className="gallery-item" key={i} onClick={this.toggle}>
<a href='' className="inner">
<img src={item.images.thumbnail_sm} alt={block.title} srcSet={`${item.images.thumbnail_md} 1x, ${item.images.thumbnail_lg} 2x`} className="img-fluid image" title="" />
{ block.gallery.length > (limit + 1) && i == limit ?
<div className="img-overlay">
<span className="img-indicator">{ block.gallery.length - (limit + 1) }+ <span className="hidden-xs">Foto's</span></span>
</div>
: null
}
</a>
</div>
: null
))}
</div>
</div>
</div>
这是我的reactstrap模态,我要在其中显示被单击的图像:
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
<ModalBody>
<img src={block.gallery[this.state.clickedImage].item.images.thumbnail_lg}/>
</ModalBody>
</Modal>
这是我要传递clickedImage id的切换功能:
toggle(id) {
this.setState({
clickedImage: id,
modal: !this.state.modal
});
}
为了获得最佳实践,我不建议在onClick中进行绑定,因为这会导致每次单击时都调用绑定。 如果您使用的是ES6,则应将其绑定到构造函数中:
Class MyComponent extends React.Component {
constructor(props){
super(props);
this.toggle = this.toggle.bind(this);
}
}
和
<div className="gallery-item" key={i} onClick={(i) => this.toggle(i)}></div>
更新:喜欢评论说。 这实际上不是最好的方法,最好的方法不是创建新函数并在每个渲染器上附加事件,这意味着它应该仅仅是
<div className="gallery-item" key={i} onClick={this.toggle}></div>
但由于您需要传递ID,因此最好的选择是将其重构为较小的组件,例如<GalleryItem>
并通过props
传递ID
值得一读: 这
更新:还请查看注释,使用dataset.index
和data-index
甚至更好
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.