Busqué documentación y preguntas para esto, pero me sorprendió no poder encontrar ninguna.
En el archivo React index.d.ts se muestra:
// Keyboard Events
onKeyDown?: KeyboardEventHandler<T>;
onKeyDownCapture?: KeyboardEventHandler<T>;
onKeyPress?: KeyboardEventHandler<T>;
onKeyPressCapture?: KeyboardEventHandler<T>;
onKeyUp?: KeyboardEventHandler<T>;
onKeyUpCapture?: KeyboardEventHandler<T>;
Y quería usar onKeyUp pero luego noté las dos versiones. ¿Cuál es la diferencia entre esto y onKeyUpCapture y cuáles son los beneficios de uno sobre el otro? ¿Cuándo usaría cada uno?
matin kajabadi
Los controladores de eventos en reaccionar pasan instancias de SyntheticEvent, un contenedor multinavegador alrededor del evento nativo del navegador. El término capture no está relacionado con React. De hecho, es un concepto de DOM HTML Event.
Hay 3 fases generales de propagación de eventos. Eventos DOM:
El fase de captura: el objeto de evento se propaga a través de los ancestros del destino desde la ventana hasta el padre del destino. (el evento se reduce al elemento). Es posible que apenas desee usarlo en código real.
El fase objetivo: El objeto de evento llega al objetivo de evento del objeto de evento. Esta fase también se conoce como la fase en el objetivo. Si el tipo de evento indica que el evento no burbujea, el objeto de evento se detendrá después de completar esta fase.
El fase de burbuja: el objeto de evento se propaga a través de los ancestros del destino en orden inverso, comenzando con el padre del destino y terminando con la ventana. Esta fase también se conoce como fase de burbujeo.
Los objetos de evento se envían a un objetivo de evento. Pero antes de que pueda comenzar el envío, primero se debe determinar la ruta de propagación del objeto de evento.
La ruta de propagación es una lista ordenada de objetivos de eventos actuales a través de los cuales pasa el evento. Esta ruta de propagación refleja la estructura de árbol jerárquico del documento. El último elemento de la lista es el destino del evento, y los elementos anteriores de la lista se conocen como antepasados del destino, con el elemento inmediatamente anterior como el principal del destino.
“>Como se puede ver en esta imagen, muestra el fase de captura que comienza desde la ventana pasando por la cadena de ancestros hasta el objetivo del elemento. Luego, cuando llega al elemento de destino, se activa allí: fase objetivo Y finalmente burbujea hasta los ancestros del objetivo: fase burbujeante (dejará de burbujear si algún antepasado stopPropagation
Entonces, React le brinda la fase de captura al agregarla a onKeyUp cual es onKeyUpCapture
-
Esa es la mejor explicación que he visto de las tres fases. Gracias por eso. Entonces, ¿cuándo se activa onKeyUpCapture? Supongo que es antes de onKeyUp porque, según tengo entendido, se llama a onKeyUp durante la fase de destino. ¿Ocurre onKeyUpCapture una vez que se captura el objetivo? ¿Hay algún beneficio en usar esto si se llama instantáneamente antes de onKeyUp si así es como funciona?
– Mayron
22 de enero de 2020 a las 7:17
-
Correcto, como expliqué.
onKeyUpCapturese activará primero desde la ventana a través de los ancestros del elemento. (depende de dónde quieras tener eso). Después de que alcance el objetivo, activará el objetivo y finalmente se elevará desde el objetivo hacia su padre. Apenas necesitaríasCaptureen su código a menos que haya una razón por la que desee manejar algo antes de que alcance el elemento de destino real, como tener una animación compleja.– Matin Kajabadi
22 de enero de 2020 a las 7:34
-
Gracias @MatinKajabadifor por describir un ejemplo de por qué alguien podría estar interesado en
onKeyUpCaptureen absoluto.– BradGreens
22/01/2021 a las 19:00
¿Responde esto a tu pregunta? onKeyPress vs. onKeyUp y onKeyDown
– Adam Strauss
22 de enero de 2020 a las 5:56
@AdamStrauss no lo siento. Sé sobre esos, pero reaccionar agrega nuevos que terminan en “Capturar” y no sé qué hacen o en qué se diferencian.
– Mayron
22 de enero de 2020 a las 6:05