帶有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密鑰

回答

相關問題