reactjs - ReactJS 从上面的元素获取图像

Question

当我触发我的 onClick 时，我需要元素 {"../images/type/" + eq.image_eq}。在 jQuery 中我只是简单地引用之前的 DOM 元素，但是如何在 React 中实现呢？

renderEqui() {
  return _.map(this.state.equi, eq => {
    return (
      <>
        <img src={"../images/type/" + eq.image_eq} />
        <img src="../images/misc/equiped.png" onClick={this.changeImage} />
      </>
    );
  });
}

我已经尝试过使用参数但没有成功。我需要检索此图像以修改另一个组件的图像。

标签： reactjs

Answer 1

你可以这样做：

 renderEqui() {
    return _.map(this.state.equi, eq => {
        const imageSrc = "../images/type/" + eq.image_eq;
        return (
                            <img src={imageSrc}/>
                            <img src="../images/misc/equiped.png" onClick={()=>this.changeImage(imageSrc )}/>
        );
    });

您的 changeImage 函数将如下所示：

changeImage = (imageSrc) => {
  cconsole.log(imageSrc)
 }