反应：执行一个函数的次数被称为

如何解决反应：执行一个函数的次数被称为

我正在尝试为图像提供addEventListener click侦听器，但是当本地主机刷新时，它仅发生一次，而在我尝试单击图像后没有任何反应。

我添加了window.onload ，以便在DOM加载后执行JS，我也尝试在单独的JS文件中进行此操作，但同样会发生。

反应代码和javascript：

// React and all other imports

export default function Women() {
    
    //All the image variables in an array
    var images = [b1,b10,b11,b4,b5,b6,b7,b8,b9,b2,b3,b12];

    window.onload = function() {
      var firstWomen = document.querySelector(".women-product-image").firstChild;

      firstWomen.addEventListener("click",console.log("click successful")
     )
   }

    return (
        <div>
           {images.map(image =>
            <div className="women-product-card" >
                <div className="women-product-image">
                    <img src={image} alt="product-image" width="200px" />
                </div>
                 <div  className="women-product-detail">
                    <h5>Lorem Ipsum</h5>
                    <p className="women-product-price" >&#x20B9;2,999</p>
                    
                    <button>Add to Cart</button>
                    <img src={star} width="20px" className="women-star-fav" />
                </div>
                
            </div>
            )}
      </div>
    )
}

当我保存此代码并刷新localhost时，它会在开发人员工具控制台中单独提供click successful，并且当我尝试单击第一个图像时也没有任何反应。

我希望我的第一张图片具有永久的eventListener，以便用户每次单击它都会给出结果的次数。

先谢谢您

解决方法

您可以直接在图片中添加点击。

// React and all other imports

export default function Women() {
    
    //All the image variables in an array
    const images = [b1,b10,b11,b4,b5,b6,b7,b8,b9,b2,b3,b12];
    const onImageClick = () => {
      alert('Image clicked')
    }

    return (
        <div>
           {images.map((image,index) =>
            <div className="women-product-card" >
                <div className="women-product-image">
                    <img src={image} alt="product-image" width="200px" onClick={index === 0 ? onImageClick : null} />
                </div>
                 <div  className="women-product-detail">
                    <h5>Lorem Ipsum</h5>
                    <p className="women-product-price" >&#x20B9;2,999</p>
                    
                    <button>Add to Cart</button>
                    <img src={star} width="20px" className="women-star-fav" />
                </div>
                
            </div>
            )}
      </div>
    )
}

,

您可能想使用onClick类向div添加women-product-image道具。这样，onClick回调将始终可用。为了将道具添加到第一个道具，您可以使用从map返回的索引。
像这样：

{images.map((image,index) =>
<div className="women-product-card" onClick={index === 0 ? () => console.log('clicked!') :  null}>
.... // the rest of your code
</div>

这可以更优雅地实现，但想法可能相同或相似