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

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

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