处理React中的onClick事件

Handling the a onClick event in React

本文关键字：事件 onClick 中的 React 处理      更新时间：2023-09-26

我使用以下组件在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的新手

如果你更新你的组件有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 handler -

onClick: function (mediaId) {
  this.setState({activeImage: mediaId});
}
相关文章：