how to handle children events reactjs? - reactjs

Question

in Plain JS I can say const corners = document.querySelectorAll('.corner') then I can add event listener to it.
My question is
Haw can I do that with react ?
Is it posibale to add on function in the parent <div> and program
it to add event listener for of its Childs
import React, { useState } from 'react'
import '../css/style.css'
function Boxshape() {
return (
<div
className='item'>
<div className='box'>
<div
onMouseOver={() => console.log('mouse over element A')}
className='corner A'></div>
<div className='corner B'></div>
<div className='corner C'></div>
<div className='corner D'></div>
</div>
</div>
)
}
export default Boxshape
this is my css just in case you are carries
.item{
height: 100px;
width: 100px;
position: absolute;
background-color: aquamarine;
}
.corner{
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: black;
z-index: 2;
}
.A{
top:-1px;
left: -1px;
cursor: nw-resize;
}
.B{
top:-1px;
right: -1px;
cursor: ne-resize;
}
.C{
bottom:-1px;
left: -1px;
cursor: sw-resize;
}
.D{
bottom:-1px;
right: -1px;
cursor: se-resize;
}

Answer 1

Yes, you can attach an onmouseover event to the parent and retrieve the targets. Here is a plain HTML snippet, but you can translate this to React.
function logCorner(e) {
const targetClassNames = e.target.className;
if (targetClassNames.includes('corner')) {
console.log(`mouse over ${targetClassNames}`)
}
}
body {
padding:2rem;
}
.item{
height: 500px;
width: 500px;
position: absolute;
background-color: aquamarine;
}
.corner{
position: absolute;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: black;
z-index: 2;
}
.A{
top:0px;
left: 0px;
cursor: nw-resize;
}
.B{
top:0px;
right: 0px;
cursor: ne-resize;
}
.C{
bottom:0px;
left: 0px;
cursor: sw-resize;
}
.D{
bottom:0px;
right: 0px;
cursor: se-resize;
}
<div className='item'>
<div class='box' onmouseover="logCorner(event)">
<div class='corner A'></div>
<div class='corner B'></div>
<div class='corner C'></div>
<div class='corner D'></div>
</div>
</div>
Depending on how complex your corner divs become you can adopt a variety of patterns.
Here is a simple example that abstracts the corner divs to a Handle component
function Boxshape() {
return (
<div className='item'>
<div className='box'>
<Handle className="A" />
<Handle className="B" />
<Handle className="C" />
<Handle className="D" />
</div>
</div>
)
}
function Handle({className}) {
const mouseOverHandler = () => {
console.log(`mouse over: ${className}`)
}
return (
<div
onMouseOver={mouseOverHandler}
className={`corner ${className}`}></div>
)
}
export default Boxshape

Answer 2

Yeah, you can pass in the event in the element tag, and then make a function (you decide the functions name), and then you can pass in the function into the element, by saying this.
don't do () cause we only log it once on click, also we put it in brackets, cause it's a js code, not a react.
function handleClick() {
console.log('Don\'t you dare click me lol')
};
<button onClick={handleClick}>I\'m a button</button>