Como Pegar Valor Dinamicamente de Input no React ⚛️

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 an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

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