 |
|
||||
React ::: Elementos de Formulários HTML ::: input type text Element/Object |
Como obter o conteúdo de uma caixa de texto em React usando a função useRef() para acessar os elementos HTMLQuantidade de visualizações: 936 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:
// vamos importar o useState e useRef
import {useState, useRef} from 'react';
// função App() que será exportada
export default function App() {
// vamos criar uma referência para a caixa
// de texto. Veja que esta referência será
// usada na declaração do elemento input type text
const txtNome = useRef(null);
// vamos usar um estado para guardarmos o conteúdo
// da caixa de texto
const [nomeAtualizado, setNomeAtualizado] = useState('');
// aqui nós gerenciamos o evento onClick do botão
const tratarEventoClick = () => {
// vamos obter o conteúdo da caixa de texto
// usando "txtNome.current.value"
setNomeAtualizado(txtNome.current.value);
};
// e retornamos para renderização
return (
<div>
<input type="text"
id="nome" name="nome"
ref={txtNome}/>
<h2>Nome Atualizado: {nomeAtualizado}</h2>
<button onClick={tratarEventoClick}>
Atualizar Estado</button>
</div>
);
}
E aqui está o código para o index.js:
// vamos fazer os imports necessários
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// definimos a raiz da aplicação React
const root = ReactDOM.createRoot(
document.getElementById('root'));
// e renderizamos a aplicação no navegador
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
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>. |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como exibir a data e hora atual em JavaScript usando o objeto DateQuantidade de visualizações: 8548 vezes |
|
O objeto Date da linguagem JavaScript pode ser usado quando queremos retornar ou exibir a data e hora atual. Nesta dica eu mostro como criar um objeto Date e em seguida mostrar os resultados na página. Veja o código HTML completo para o exemplo:
<!doctype html>
<html>
<head>
<title>Datas em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos obter a data e hora atual
var data = Date();
// e mostramos o resultado
document.write("Data e hora atual: " + data);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Data e hora atual: Sat Feb 04 2023 15:08:32 GMT-0300 (Horário Padrão de Brasília) |
VisuAlg ::: Desafios e Lista de Exercícios Resolvidos ::: Estruturas de Controle |
Exercício Resolvido de VisuAlg - Um programa que lê três números inteiros e mostra o maiorQuantidade de visualizações: 1591 vezes |
|
Pergunta/Tarefa: Faça um algoritmo VisuAlg que solicita três números inteiros e mostra o maior deles. Exiba uma mensagem caso os três números não forem diferentes. Sua saída deverá ser parecida com: Informe o primeiro número: 34 Informe o segundo número: 83 Informe o terceiro número: 72 O segundo número é o maior Veja a resolução comentada deste exercício usando VisuAlg:
Algoritmo "Um programa que lê três números inteiros e mostra o maior"
Var
// variáveis usadas na resolução do problema
num1, num2, num3: inteiro
Inicio
// vamos solicitar os três números inteiros
escreva("Informe o primeiro número: ")
leia(num1)
escreva("Informe o segundo número: ")
leia(num2)
escreva("Informe o terceiro número: ")
leia(num3)
// o primeiro número é o maior?
se (num1 > num2) e (num1 > num3) entao
escreva("O primeiro número é o maior")
senao
// o segundo número é o maior?
se (num2 > num1) e (num2 > num3) entao
escreva("O segundo número é o maior")
senao
// o terceiro número é o maior?
se (num3 > num1) e (num3 > num2) entao
escreva("O terceiro número é o maior")
senao
// os números não são diferentes
escreva("Os três números não são diferentes")
fimse
fimse
fimse
Fimalgoritmo
|
C++ ::: Dicas & Truques ::: Arquivos e Diretórios |
Arquivos e diretórios em C++ - Como excluir um arquivo usando a função remove() do C++Quantidade de visualizações: 10601 vezes |
Em algumas situações nossos códigos C++ precisam excluir arquivos. Isso pode ser feito com o auxílio da função remove() ou _remove(), disponível no header io.h or stdio.h (trazido da linguagem C). Veja a assinatura desta função:int remove(const char *filename); Se o arquivo for excluído com sucesso a função retornará o valor 0. O retorno será -1 se um erro ocorrer. Neste caso a variável global errno será definido como um dos seguintes valores: a) ENOENT - No such file or directory - O caminho do arquivo é inválido; b) EACCESS - Acesso negado - Algum outro programa está usando este arquivo e mantém controle sobre o mesmo. Veja um trecho de código no qual excluimos um arquivo:
#include <iostream>
using namespace std;
int main(int argc, char *argv[]){
// vamos excluir este arquivo
char arquivo[] = "C:\\Dev-Cpp\\arquivo.txt";
// vamos testar se o arquivo foi excluído com sucesso
if(remove(arquivo) != 0){
cout << "Erro: " << strerror(errno) << endl;
}
else{
cout << "Arquivo excluído com sucesso" << endl;
}
system("PAUSE"); // pausa o programa
return EXIT_SUCCESS;
}
É possível usar a versão Unicode de remove(). O método _wremove(), também presente em io.h or stdio.h é útil quando precisamos internacionalizar nossas aplicações. Veja o exemplo:
#include <iostream>
using namespace std;
int main(int argc, char *argv[]){
// vamos excluir este arquivo
wchar_t arquivo[] = L"C:\\Dev-Cpp\\arquivo.txt";
// vamos testar se o arquivo foi excluído com sucesso
if(_wremove(arquivo) != 0){
cout << "Erro: " << strerror(errno) << endl;
}
else{
cout << "Arquivo excluído com sucesso" << endl;
}
system("PAUSE"); // pausa o programa
return EXIT_SUCCESS;
}
Ao executar este código nós teremos o seguinte resultado: Arquivo excluído com sucesso. |
Nossas 20 dicas & truques de programação mais populares |
|
C++ - Como definir a cor de fundo para um Edit Control em tempo de execução usando C++ e a API do Windows Java - Java Swing Avançado - Como exibir imagens nas células de uma JTable em suas aplicações Java Swing Java - Padrões de projeto para iniciantes - Como usar o padrão de projeto Singleton em suas aplicações Java |
Nossas 20 dicas & truques de programação mais recentes |
Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site |
|
Python - Como criar o jogo Pedra, Papel, Tesoura em Python - Jogo completo em Python com código comentado |
Últimos Exercícios Resolvidos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
