Desafío: Crear un Componente de Formulario Controlado
Tarea
En este desafío, se debe crear un componente Form con dos campos de entrada: email y password. El objetivo es utilizar el hook useRef para referenciar los elementos de entrada y gestionar la lógica de envío del formulario.
Instrucciones
- Importar el hook
useRefdesde la bibliotecareact. - Dentro del componente
Form, declarar dos variables deuseRef:emailRefypasswordRef, inicializadas connull. - Restablecer los campos de entrada asignando una cadena vacía a sus valores mediante las variables de
useRef.
- Para importar el hook necesario desde la biblioteca React, incluir una declaración
import. - Para esta tarea, se utilizará el hook
useRefpara almacenar datos sin afectar el marcado. - Para determinar el nombre de variable adecuado para la referencia, elegir una palabra asociada con la referencia y añadir "Ref" al final.
- Para inicializar la referencia con
null, pasarnullcomo valor inicial entre los paréntesis del hookuseRef(por ejemplo,useRef(null)). - Para restablecer la entrada del formulario, utilizar la variable de referencia correspondiente y asignar su
.current.valuea una cadena vacía ("").
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you explain how to use useRef to reset the input fields?
What should the form submission handler look like?
Can you show how to connect the refs to the input elements?
Awesome!
Completion rate improved to 2.17
Desafío: Crear un Componente de Formulario Controlado
Desliza para mostrar el menú
Tarea
En este desafío, se debe crear un componente Form con dos campos de entrada: email y password. El objetivo es utilizar el hook useRef para referenciar los elementos de entrada y gestionar la lógica de envío del formulario.
Instrucciones
- Importar el hook
useRefdesde la bibliotecareact. - Dentro del componente
Form, declarar dos variables deuseRef:emailRefypasswordRef, inicializadas connull. - Restablecer los campos de entrada asignando una cadena vacía a sus valores mediante las variables de
useRef.
- Para importar el hook necesario desde la biblioteca React, incluir una declaración
import. - Para esta tarea, se utilizará el hook
useRefpara almacenar datos sin afectar el marcado. - Para determinar el nombre de variable adecuado para la referencia, elegir una palabra asociada con la referencia y añadir "Ref" al final.
- Para inicializar la referencia con
null, pasarnullcomo valor inicial entre los paréntesis del hookuseRef(por ejemplo,useRef(null)). - Para restablecer la entrada del formulario, utilizar la variable de referencia correspondiente y asignar su
.current.valuea una cadena vacía ("").
¡Gracias por tus comentarios!