javascript - ReactJS 通过 onClick 函数传递 key

Question

我有一个图像库，我在其中循环图像对象，并且我想将 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
    });
  }

Answer 1

为了获得最佳实践，我不建议在 onClick 中进行绑定(bind)，这会导致每次单击时都会调用绑定(bind)。如果您使用 ES6，则应该将其绑定(bind)在构造函数中:

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

值得一读:this

更新:另请查看评论，使用 dataset.index和data-index甚至更好