Processamento de dados de formulário ao clicar em um botão no React

Na lição anterior, fizemos com que ao inserir um caractere em um input, o resultado aparecesse instantaneamente no parágrafo. Isso, claro, parece bonito, mas tem uma desvantagem.

Vamos imaginar que precisamos realizar uma operação "pesada", que consome muitos recursos. Não é muito ótimo fazê-la a cada caractere digitado - é melhor aguardar a entrada final dos dados e então executar a operação necessária uma vez e exibir o resultado no parágrafo.

Para isso, precisamos adicionar um botão, ao clicar no qual nossa operação que consome muitos recursos será realizada. Nesse caso, novamente, cada input terá seu próprio estado, mais um estado adicional que precisamos para registrar o resultado da operação e exibi-lo na tela.

Vejamos um exemplo. Suponha que temos dois inputs e um botão. Ao clicar no botão, vamos encontrar a soma dos números inseridos nos inputs.

Vamos implementar:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	function handleChange1(event) {
		setValue1(event.target.value);
	}
	
	function handleChange2(event) {
		setValue2(event.target.value);
	}
	
	function handleClick() {
		setResult(Number(value1) + Number(value2));
	}
	
	return <div>
		<input value={value1} onChange={handleChange1} />
		<input value={value2} onChange={handleChange2} />
		
		<button onClick={handleClick}>btn</button>
		<p>result: {result}</p>
	</div>;
}

Você pode usar a versão abreviada:

function App() {
	const [value1, setValue1] = useState(0);
	const [value2, setValue2] = useState(0);
	const [result, setResult] = useState(0);
	
	return <div>
		<input value={value1} onChange={event => setValue1(event.target.value)} />
		<input value={value2} onChange={event => setValue2(event.target.value)} />
		
		<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
		<p>result: {result}</p>
	</div>;
}

Dados dois inputs, dois botões e um parágrafo. Suponha que números sejam inseridos nos inputs. Ao clicar no primeiro botão, encontre a soma dos números, e ao clicar no segundo botão - o produto. Exiba o resultado no parágrafo.

Dados dois inputs, um botão e um parágrafo. Suponha que datas sejam inseridas nos inputs no formato 2025-12-31. Ao clicar no botão, encontre a diferença entre as datas em dias e exiba o resultado no parágrafo.

Modifique a tarefa anterior para que por padrão, os inputs mostrem a data atual.

Dado um input e um parágrafo. Um número é inserido no input. Ao perder o foco, exiba no parágrafo a soma dos dígitos do número inserido.

Dado um input e um parágrafo. Um número é inserido no input. Ao perder o foco, exiba no parágrafo o produto dos divisores do número inserido.