Desafio: Construir um Componente de Formulário Controlado
Tarefa
Neste desafio, será criado um componente Form com dois campos de entrada: email e password. O objetivo é utilizar o hook useRef para referenciar os elementos de entrada e gerenciar a lógica de envio do formulário.
Instruções
- Importe o hook
useRefda bibliotecareact. - Dentro do componente
Form, declare duas variáveis comuseRef:emailRefepasswordRef, inicializadas comnull. - Redefina os campos de entrada atribuindo uma string vazia aos seus valores utilizando as variáveis criadas com
useRef.
- Para importar o hook necessário da biblioteca React, inclua uma declaração
import. - Para esta tarefa, será utilizado o hook
useRefpara armazenar dados sem afetar o markup. - Para determinar o nome apropriado da variável ref, escolha uma palavra associada à referência e adicione "Ref" ao final.
- Para inicializar a ref com
null, passenullcomo valor inicial nos colchetes do hookuseRef(por exemplo,useRef(null)). - Para redefinir o campo do formulário, utilize a variável ref correspondente e atribua ao seu
.current.valueuma string vazia ("").
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 3. Capítulo 5
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.17
Desafio: Construir um Componente de Formulário Controlado
Deslize para mostrar o menu
Tarefa
Neste desafio, será criado um componente Form com dois campos de entrada: email e password. O objetivo é utilizar o hook useRef para referenciar os elementos de entrada e gerenciar a lógica de envio do formulário.
Instruções
- Importe o hook
useRefda bibliotecareact. - Dentro do componente
Form, declare duas variáveis comuseRef:emailRefepasswordRef, inicializadas comnull. - Redefina os campos de entrada atribuindo uma string vazia aos seus valores utilizando as variáveis criadas com
useRef.
- Para importar o hook necessário da biblioteca React, inclua uma declaração
import. - Para esta tarefa, será utilizado o hook
useRefpara armazenar dados sem afetar o markup. - Para determinar o nome apropriado da variável ref, escolha uma palavra associada à referência e adicione "Ref" ao final.
- Para inicializar a ref com
null, passenullcomo valor inicial nos colchetes do hookuseRef(por exemplo,useRef(null)). - Para redefinir o campo do formulário, utilize a variável ref correspondente e atribua ao seu
.current.valueuma string vazia ("").
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 3. Capítulo 5