Is there any way to add all the events from the parent element to all the child elements using ReactJS without hard coding all of the events?
<div className='myClass' onClick={handleSelect} onDoubleClick={handleOpen}>
<span className='child' />
</div>
Click handlers propagate, so there's no need. Attach a single handler to the parent.
const App = () => {
const handleSelect = () => console.log('click');
const handleOpen = () => console.log('double click');
return (
<div className='myClass' onClick={handleSelect} onDoubleClick={handleOpen}>
<span className='child'>child</span>
</div>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>If you need to identify which child element was clicked on, or exclude certain children from resulting in the handler running, use the event passed to the handler and see if its target .matches what you're looking for.