 |
|
||||
 Código-Fonte Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
|||||
Você está aqui: React ::: Elementos de Formulários HTML ::: input type text Element/Object |
||||||||
Como retornar o conteúdo de uma caixa de texto em React usando a função useRef() para acessar os elementos HTMLQuantidade de visualizações: 651 vezes |
||||||||
|
Nesta dica mostrarei como podemos usar useRef() para criar uma referência para um elemento HTML <input type="text">. Em seguida nós vamos usar a propriedade current.value para retornar o conteúdo da caixa de texto e atualizar o estado nomeAtualizado, criado a partir da função useState(). Este código, embora simples, é o ponto de partida para aplicações React bem interessantes, pois não fazemos uso do evento onChange das caixas de texto para atualizar o estado da aplicação. Isso, como é fácil de se perceber, economiza os recursos gastos em processamento desnecessário. Veja o código para App.js:
E aqui está o código para o index.js:
Execute a aplicação React, digite um nome na caixa de texto e clique o botão Atualizar Estado. Somente neste momento é que o conteúdo da caixa de texto será transferido para o estado nomeAtualizado e refletido no elemento <h2>. |
||||||||
 Link para compartilhar na Internet ou com seus amigos: |
||||||||
React ::: Elementos de Formulários HTML ::: input type text Element/Object |
||||||||
Como obter o texto digitado em uma caixa de texto em React usando useState()Quantidade de visualizações: 552 vezes |
||||||||
|
Nesta dica mostrarei como podemos retornar o texto digitado em um elemento HTML <input type="text"> ao clicarmos em um botão. Para isso nós faremos uso do gerencimento de estado proporcionado pelo objeto useState do React. Note que teremos dois estados: nome e nomeAtualizado, que estarão conectados às funções setNome() e setNomeAtualizado(). No momento que o texto é digitado na caixa de texto, automaticamente o estado nome é atualizado para corresponder ao contéudo exato do elemento HTML <input type="text">. Somente quando o botão é clicado é que transferimos o valor do estado nome para o estado nomeAtualizado, por meio de uma chamada à função setNomeAtualizado. Veja o código completo para o App.js:
E aqui está o código para o index.js:
Execute o exemplo e você verá uma caixa de texto <input type="text">, um botão <button> e dois elementos <h2>. Quando digitamos na caixa de texto, automaticamente o estado nome é atualizado. Ao clicarmos no botão, o estado nome é transferido para o estado nomeAtualizado, tudo isso é refletido de imediato na página. | ||||||||
Veja mais Dicas e truques de React |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
