Tengo un diseño de tablero (Syncfusion) y un menú que permite a los usuarios actualizar/eliminar/agregar nuevos paneles. Quiero obtener la ID de cualquier elemento sobre el que se desplace el mouse para que mi menú contextual pueda ofrecer las operaciones adecuadas (algunos elementos no se pueden editar, etc.) ¿Cuál es la mejor manera de manejar esto en React?
Puede usar onMouseOver con reaccionar. En cada elemento, pasaría una función que se ejecuta y obtiene la ID del elemento.
la funcion seria
const Example = (props) => { const handleOnMouseOver = (event) => { const element_id = event.target.id; console.log(element_id); }; return ( <div> <p onMouseOver={handleOnMouseOver} id="id-element-one"> Element one </p> <p onMouseOver={handleOnMouseOver} id="id-element-two"> Element two </p> <p onMouseOver={handleOnMouseOver} id="id-element-three"> Element three </p> <p onMouseOver={handleOnMouseOver} id="id-element-four"> Element four </p> </div> ); }; // Render it ReactDOM.render(<Example />, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>