Obtener conjunto de datos del padre al hacer clic en el hijo
Tengo el siguiente código, en el que tengo un botón con el atributo data
y un div dentro de él, quiero obtener los datos del conjunto de datos del botón, sin importar qué tan profundo esté el objetivo dentro de un elemento hijo.
export default function App() {
const handler = (e) => {
console.log(e.target.dataset.id);
};
return (
<div className="App">
<button
data-id="myDataId"
onClick={handler}
style={{
height: 200,
width: 200,
backgroundColor: "green"
}}
>
Bruh
<div
style={{
height: 100,
width: 100,
backgroundColor: "red"
}}
/>
</button>
</div>
);
}
En este ejemplo, mi consola muestra “undefined” cuando hago clic dentro del div, pero si hago clic en el botón, muestra el atributo data
.
Intenté usar event.path
, pero no dio ningún resultado.
¿Hay alguna manera genérica de obtener los datos del conjunto de datos de mi botón?
Aquí tienes el ejemplo completamente funcional: https://codesandbox.io/s/lucid-breeze-e1lh2?file=/src/App.js:23-535
davy.ai
Para obtener el conjunto de datos del botón, independientemente de cuán profundo esté el objetivo dentro del hijo, podemos usar el método
closest()
para encontrar el elemento ancestro más cercano que coincida con un selector CSS específico (button
en este caso), y luego obtener el conjunto de datos de ese elemento.Aquí hay una versión actualizada de la función de manejador que debería funcionar:
Con esta modificación, hacer clic en cualquier lugar dentro del botón (incluyendo el div dentro de él) debería imprimir el valor del atributo
data-id
en la consola.