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

我想捕捉图像上的onClick事件来做一些处理，比如应用一个CSS来放置一个覆盖。我该如何做出反应。请理解我的反应是新的。

Answer 1

如果您更新组件以使其具有onClick={this.onImageClick.bind(this, image.mediaId)，那么您可以处理onClick，并知道单击了哪个图像，保存在状态中，并使用它在呈现时将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});
}