ReactでonClickイベントを処理する

Question

私は以下のコンポーネントを使用して、Reactの画像リストを表示しています。

class Viewer extends React.Component{ 

    constructor(props){ 
    super(props); 
    this.state = { 
     images : ImageList 
    }; 
    } 

    render(){ 
    return (
     <div className="row"> 
     <div className="image-viewer"> 
      <ul className="list-inline"> 
      {this.state.images.map(function (image) { 
       return (<li key={image.mediaId}><a href="#"><img src={image.src} 
                   className="img-responsive img-rounded img-thumbnail" 
                   alt={image.mediaId}/></a></li>); 
      })} 

      </ul> 
     </div> 
     </div> 
    ); 
    } 
} 

私はオーバーレイを置くためにCSSを適用するように、いくつかの処理を行うには画像をトラップするonClickイベントをしたいです。どのように私はこれをReactで行うのですか？私はReactに新しいランクであることをご理解ください。

Answer 1

onClick={this.onImageClick.bind(this, image.mediaId)を持つコンポーネントを更新すると、onClick plusはどの画像がクリックされたかを知り、それを状態に保存し、それを使ってrenderの画像にclassNameを適用することができますあなたが欲しいものです！）。

したがって、このような何か：

{this.state.images.map(function (image) { 
    return (<li key={image.mediaId} className={this.state.activeImage === image.mediaId ? 'active' : undefined}><a href="#" onClick={this.onClick.bind(this, image.mediaId)}><img src={image.src} className="img-responsive img-rounded img-thumbnail" alt={image.mediaId}/></a></li>); 
})} 

そしてのonClickハンドラ -

onClick: function (mediaId) { 
    this.setState({activeImage: mediaId}); 
}