Trabajo con inputs en React

El trabajo con inputs en React se realiza mediante estados. A cada input se le asigna su propio estado, que contiene el value del input.

Veamos un ejemplo. Supongamos que tenemos un input:

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

Supongamos también que tenemos un estado:

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

Vinculemos nuestro estado al atributo value del input:

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

En este caso, resultará que al cambiar el estado, el texto del input cambiará de manera reactiva.

Sin embargo, esto da un efecto secundario interesante: ¡ahora al ejecutar el código en el navegador es imposible cambiar el texto en el input! Por qué: porque al introducir texto en el input no cambia el estado value, en consecuencia, el texto en el input no debería cambiar.

Pruébelo usted mismo. Copie mi código y ejecútelo en su entorno. Intente cambiar el texto en el input - no podrá hacerlo. Abra la consola del navegador - verá una advertencia de React. Esta advertencia nos indica que hemos vinculado un estado al input, pero con ello hemos bloqueado el input.

Hagamos que sea posible introducir texto en nuestro input. Para ello es necesario que al introducir texto cambie nuestro estado al valor actual del input.

Para empezar, necesitamos asignar al input el evento onChange:

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

Este evento en React se comporta de forma diferente en comparación con JS puro. En React se activa inmediatamente al cambiar el input. Es decir, al introducir o eliminar un carácter.

Ahora agreguemos el manejador de nuestro evento:

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

En este manejador debemos leer el texto actual del input y establecerlo en el estado usando la función setValue.

El problema es que this en esta función no apuntará a nuestro input - esa es una característica de React. Para obtener el elemento en el que ocurrió el evento, necesitamos usar event.target:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // referencia al elemento DOM del input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Mostremos usando event.target el texto actual del input:

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

Y ahora escribamos el texto del input en nuestro estado:

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

Ahora podremos introducir texto en el input. Al mismo tiempo, el estado value siempre contendrá el texto actual del input.

Podemos comprobarlo fácilmente. Mostremos el contenido de nuestro texto en un párrafo. En este caso, al introducir texto en el input, el texto introducido aparecerá automáticamente en el párrafo:

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 reescribirlo a una versión más compacta con una función flecha anónima:

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

Por lo tanto, para que cualquier input funcione necesitamos lo siguiente: crear un estado para ese input, vincular el estado al atributo value del input, asignar el evento onChange al input, y en el manejador del evento cambiar el estado del input por su texto.

Estas operaciones deberán realizarse con cada input. Es decir, si tienes dos inputs, entonces tendrás dos estados y dos funciones manejadoras del evento onChange.

Crea dos inputs. Que el texto del primer input se muestre en el primer párrafo, y el texto del segundo input - en el segundo párrafo.