带有onClick函数的ReactJS Pass密钥

我有一个图像库，其中我循环图像对象，我想将i传递给我的onClick函数。这是我的图片库代码：带有onClick函数的ReactJS Pass密钥

<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 
    }); 
    }

来源

2016-12-02 Sreinieren

你需要或者'的onClick = {this.toggle.bind（这一点，我）}'或'店data-index = {i}'在标签上（用+ event.target.dataset.index检索） – Matt

@Matt你能给我一个例子吗？ è？ – Sreinieren

替换'onClick = {this.toggle}' - >'onClick = {this.toggle.bind（this，i）}'。你的'toggle'需要一个'id'作为第一个参数，但由于它是一个事件处理函数，它会将一个'event'对象作为第一个参数。 'bind'会改变这个，所以'toggle'接收'id，event'参数，但它是每个渲染器每个索引的新函数。 – Matt

对于最佳做法，我不建议在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阅读：this

来源

2016-12-02 15:33:23 Kossel

这同样不好，'（i）=> this.toggle（i）'是每个索引和渲染的新绑定/函数。 – Matt

什么是正确的/最好的方式？：o – Kossel

@Kossel：就像那样，使用'onClick = {this.toggle}'。 – Leandro

@马特评论是正确的：

<div className="gallery-item" key={i} onClick={this.toggle.bind(this, i)}></div>

不得不检查的是id不为空或未定义，因为状态也设置为切换模式。

{(this.state.clickedImage !== undefined && this.state.clickedImage !== null) ? 
    <img className="img-fluid" src={block.gallery[this.state.clickedImage].images.thumbnail_lg} /> 
    : null 
}

来源

2016-12-02 15:09:42 Sreinieren

带有onClick函数的ReactJS Pass密钥

回答

相关问题