Beeem vindes ao meu primeiro post!!! Queria dizer para vocês que estou muito empolgado para compartilhar ideias bacanas, ou até mesmo maturar o básico através da escrita. Ok, Mas Cristian, seu primeiro post vai ser desse conteúdo simplão ?! — Sim. 💋💋
Sem mais delongas e explicações desnecessárias, bora de conteúdo.
Input Básico de Texto
Geralmente a aplicação de input faz sentido em formulários, pois bem, vamos começar olhando a declaração de input básico do nosso querido HTML.
Armazenando Valor do Input de Texto
Quando estamos lidando com componentes, toda a informação é guardada no estado do componente. Podemos usar o ilustríssimo hook useState
para acompanhar cada valor de entrada.
Chegando à magia Reactlista, vamos gerenciar o valor do input adicionando o atributo value ao nosso componente e linkando com a nossa variável inputValue
.
O valor inicial do input é definido pelo estado do componente inputValue
, que por sua vez, é gerenciado pelo hook useState
— Show ! Só copiar e colar ?! NOP. Ao rodar no StackBlitz da vida, já temos a saudosa mensagem:
Warning: You provided a
value
prop to a form field without anonChange
handler. This will render a read-only field. If the field should be mutable usedefaultValue
. Otherwise, set eitheronChange
orreadOnly
.
Que interessante né, se a gente quiser ter um componente mu-tá-vel, temos que usar concomitante o atributo onChange
, do contrário, deveríamos ter declarado defaultValue
para termos o componente apenas como um campo de leitura. Ou seja, o próprio console avisa sobre as 💩 que estamos fazendo.
Verificando a dinaminicidade do Input de Texto
Vamos adicionar o atributo onChange
no nosso componente chamando a função handleChange
.
Now, vamos criar a função handleChange
.
Quando o usuário altera o valor do input, o evento onChange
é disparado e chama a função handleChange
, que atualiza o estado do componente com o novo valor do input. Dessa forma, o valor do input sempre estará sincronizado com o estado do componente! 💥
Finalizamos nosso post , mas antes de ir, o código está aqui, e se gostou e fez sentido, não se esqueça de reagir e comentar, isso me motiva muito!
💻 GitHub: cristianmeelo
💼 LinkedIn: Cristian Melo
Top comments (0)