在 React 中处理 onClick 事件答案

【问题标题】：Handling the a onClick event in React在 React 中处理 onClick 事件
【发布时间】：2017-03-14 02:53:05
【问题描述】：

我正在使用以下组件在 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 来放置叠加层。我如何在 React 中做到这一点。请理解我是 React 的新手。

【问题讨论】：

你检查过文档吗？ facebook.github.io/react/docs/handling-events.html
是的，这就是我开始的地方。但由于我对 javascript 的了解有限，我有点不知所措。
React JS onClick event handler的可能重复
尝试在文档中使用onClick。创建一个新函数（最好是箭头）并在元素中添加onClick={() => clickHandler()}

标签： javascript css reactjs

【解决方案1】：

如果您将组件更新为具有onClick={this.onImageClick.bind(this, image.mediaId)，则您可以处理 onClick 并知道单击了哪个图像，将其保存在状态，并使用它将类名应用于渲染图像（如果这是这就是你想要的！）。

所以是这样的：

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

【讨论】：