es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Obtener conjunto de datos del padre al hacer clic en el hijo

19 Jul, 2023 Programación

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

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    const handler = (e) => {
  const button = e.target.closest('button');
  console.log(button.dataset.id);
};

    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.

Comments are closed.