事件 onClick 与 React - function 未调用

Question

I have a Js file with some functions inside.

const addProductToCart = document.querySelectorAll('.add-product-to-cart');

ProductToCart.forEach(el => {
        el.addEventListener('click', e => {
            const redirect = e.target.dataset.redirect;
            if (!redirect) {
                e.preventDefault();
            }
            let product = e.target.dataset.product
            if (product) {
                fetch(baseUrl + "cookie/product/" + product,
                    {method: 'POST'}
                ).then(r => console.log(r))
            }
            animateIcon.animate(translations["Your sample has been successfully added to your cart"], 'cart');
        });
    }); 

With inspection of the HTML code I can see event on each product:

My function to add a sample works, but not in my render React (I just added the name of the class).

<a href={""} className={"add-product-to-cart"} data-product={product.id}>Test</a>

But in this case, I can't see the event and my function is not called:

So: Why my Js doesn't work on this page, is there something to add/do about "event" works? What can I do to import all logic from another Js file.

Thanks in advance, I am new to React...

Answer 1

Without seeing the rest of your react component its difficult to tell but if the function isnt being called did you bind it?

class YOURNAME extends React.Component {
constructor(props) {
  super(props)
  this.addProductToCart = this.addProductToCart.bind(this);
}

Then outline the function

addProductToCart(){
//what you want to do here

}

Your current button is fine.