Trabalhando com inputs no React

Trabalhar com inputs no React é feito por meio de estados. Cada input recebe seu próprio estado, contendo o value do input.

Vamos ver um exemplo. Suponha que temos um input:

function App() {
	return <div>
		<input />
	</div>;
}

Suponha também que temos um estado:

function App() {
	const [value, setValue] = useState('texto');
	
	return <div>
		<input />
	</div>;
}

Vamos vincular nosso estado ao atributo value do input:

function App() {
	const [value, setValue] = useState('texto');
	
	return <div>
		<input value={value} />
	</div>;
}

Nesse caso, acontece que ao alterar o estado, o texto do input mudará de forma reativa.

Isso, no entanto, dá um efeito colateral interessante: agora, ao executar o código no navegador, é impossível alterar o texto no input! Por quê: porque ao digitar texto no input, o estado value não muda, consequentemente, o texto no input não deve mudar.

Tente você mesmo. Copie meu código e execute-o você mesmo. Tente alterar o texto no input - você não conseguirá. Abra o console do navegador - você verá um aviso do React nele. Este aviso nos indica que vinculamos um estado ao input, mas com isso bloqueamos o input.

Vamos fazer com que seja possível digitar texto em nosso input. Para isso, precisamos fazer com que, ao digitar, nosso estado mude para o valor atual do input.

Para começar, precisamos adicionar ao input o evento onChange:

function App() {
	const [value, setValue] = useState('texto');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Este evento no React se comporta de forma diferente em comparação com JS puro. No React, ele é acionado imediatamente ao alterar o input. Ou seja, ao digitar ou apagar um caractere.

Agora vamos adicionar o manipulador do nosso evento:

function App() {
	const [value, setValue] = useState('texto');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Neste manipulador, devemos ler o texto atual do input e defini-lo no estado usando a função setValue.

O problema é que o this desta função não apontará para o nosso input - esta é uma característica do React. Para obter o elemento onde o evento ocorreu, precisamos usar event.target:

function App() {
	const [value, setValue] = useState('texto');
	
	function handleChange(event) {
		console.log(event.target); // referência ao elemento DOM do input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Vamos exibir o texto atual do input usando event.target:

function App() {
	const [value, setValue] = useState('texto');
	
	function handleChange(event) {
		console.log(event.target.value); // texto atual do input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

E agora vamos escrever o texto do input em nosso estado:

function App() {
	const [value, setValue] = useState('texto');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Agora conseguiremos digitar texto no input. Com isso, o estado value sempre conterá o texto atual do input.

Podemos facilmente verificar isso. Vamos exibir o conteúdo do nosso texto em um parágrafo. Neste caso, ao digitar texto no input, o texto digitado aparecerá automaticamente no parágrafo:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>texto: {value}</p>
	</div>;
}

Podemos reescrever para uma versão mais compacta com uma função arrow anônima:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>texto: {value}</p>
	</div>;
}

Assim, para que qualquer input funcione, precisamos do seguinte: criar um estado para esse input, vincular o estado ao atributo value do input, adicionar o evento onChange ao input, no manipulador do evento, alterar o estado do input para o seu texto.

Estas operações precisarão ser realizadas para cada input. Ou seja, se você tiver dois inputs, então você terá dois estados e duas funções manipuladoras do evento onChange.

Faça dois inputs. Deixe o texto do primeiro input ser exibido no primeiro parágrafo, e o texto do segundo input - no segundo parágrafo.