I have an html page with:
I would like to listen to a "click event" of an html element from a react component.
Here, i need to get inside the "react-component" an event that will be triggered when we click on the "click" element.
<div id="click">button in static html</div>
<div id="react-component"></div> -> replace by a react component
Is there a way to achieve that? Thanks
You can still write normal JS code in react. Just add a useEffect(..., []) hook and bind your buttons onClick using standard JS code in there.
Here is the documentation for the JS onclick event: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
A few methods for this.
One of which is using querySelector or getElementById like you would in vanilla JS.
So you can do this:
// HTML:
<div id="click">button in static html</div>
<div id="react-component"></div> -> replace by a react component
// JSX:
const myElement = document.getElementById("click");
myElement.onclick = () => {
...
};
If you want to listen any click event (click anywhere) you can just use a classic eventListener in a useEffect from your react component:
useEffect(() => {
window.addEventListener('click', () => { you function });
return () => window.removeEventListener('click', () => { you function });
});
If what you want is to listen the click event of a given part of the app I would suggest you handle it from it's component and pass a callback to the one you want to handle the event.
