Блог

Я пытаюсь предоставить изображению прослушиватель addEventListener click , но это происходит только один раз само по себе, когда локальный хост обновляется, и ничего не происходит после того, как я пытаюсь щелкнуть изображение.

Я добавил window.onload , чтобы JS выполнялся после загрузки DOM, я также пробовал это в отдельном файле JS, но происходит то же самое.

Код react и 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" >amp;#x20B9;2,999</p>
                    
                    <button>Add to Cart</button>
                    <img src={star} width="20px" className="women-star-fav" />
                </div>
                
            </div>
            )}
      </div>
    )
}
  

Когда я сохраняю это, и локальный хост обновляется, он появляется 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" >amp;#x20B9;2,999</p>
                    
                    <button>Add to Cart</button>
                    <img src={star} width="20px" className="women-star-fav" />
                </div>
                
            </div>
            )}
      </div>
    )
}
  

Вы хотели бы добавить onClick prop к div women-product-image классу with . Таким образом, обратный вызов onClick всегда будет доступен. Для того, чтобы добавить реквизит к первому, вы можете использовать индекс, возвращаемый из map .
Итак, что-то вроде:

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

Это может быть достигнуто немного более элегантно, но идея, вероятно, будет такой же или похожей