ReactJS onClick関数でキーを渡す

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番号：

toggle(id) { 
    this.setState({ 
     clickedImage: id, 
     modal: !this.state.modal 
    }); 
    } 

Answer 1

ベストプラクティスとして、私は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> 

UPDATE：のようなコメントが言います。これは実際には最善の方法ではありませんが、最良の方法は、最善の策それだけで

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

でなければなりませんが、あなたがIDを渡す必要があるため意味し、新しい機能を作成し、すべてのレンダリングでイベントを添付することではありません<GalleryItem>ような小さなコンポーネントにそれをリファクタリングし、読み取ることprops

ワースによってIDを渡すことになる。this

Answer 2

@Mattは正しかったのコメント：

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

状態は、モーダルを切り替えるためにも設定されているため、idはnullでも、未定義でもないことを確認する必要があります。

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