Un input es un dato que se inserta a nuestra aplicación para ser procesado en nuestro servidor de algún modo. Los tipos de input que más nos encontramos son el de usuario y contraseña, fundamentales para cualquier aplicación que requiera acceder a una cuenta. Para definir cómo se procesan estos datos, debemos aprender a controlarlos. En este post, te enseñaremos cómo controlar input en React para manejar los datos introducidos a tu aplicación.
¿Qué es controlar un React input?
Cuando hablamos de controlar un react input nos referimos a definir la forma en la que se procesa un dato introducido en nuestra aplicación. Como puedes leer en nuestro post sobre formularios en React, esta librería JavaScript maneja los formularios y sus input de una manera muy diferente a como se haría en HTML y JavaScript.
Si tenemos una página de login con HTML y JavaScript, el botón de Log in que tiene un tipo submit haría que se lanzara el formulario. Luego, se recogerían los valores que recibe el formulario y se enviarían a una API. Este proceso es diferente en un input React.
¿Cómo controlar input en React?
En React, todo lo que vemos en pantalla es el resultado de los datos que se encuentran en nuestro código, es decir, los props y los estados. Entonces, podemos hablar de un estado general que es responsable de la vista de nuestra aplicación, incluso de lo que tecleamos dentro del input de usuario y contraseña. Por lo tanto, para controlar input en React, podemos definir un estado que guarde lo que el usuario escriba.
Para que nuestro input sea el resultado de nuestro estado, debemos agregar la propiedad value. Esta es una propiedad que podemos insertar en todo input de nuestro código para insertar el valor que queramos. Te ponemos un ejemplo con el código que hemos creado en nuestro post sobre crear una página login en React. Aquí, agregamos el value “David” al input de texto que hemos creado para nuestro usuario.
import Button from ‘../../common/Button’;
function LoginPage ( ) {
return (
<div className= «LoginPage»>
<h1 className = «loginPage-title»>Log in to Twitter</h1>
<form>
<input type = «text» name= «username» value= “david”></input>
<input type= «password» name= «password»/>
<Button type=«submit» variant=«primary»>
Login
<Button/>
</form>
</div>
);
}
Ahora, verás que en el input React de usuario en el servidor está escrito “david”, el valor que le hemos dado a este elemento. Si intentas escribir encima de este valor, encontrarás que no puedes cambiar o añadir texto encima de este React input. ¿Por qué? Pues porque nuestro input está preparado para ser controlado a través de los datos. Es decir, para controlar input en React utilizamos la propiedad value. Entonces, si le pasamos una propiedad value con nuestro nombre, estamos diciendo que el valor de este input siempre es nuestro nombre. Por eso mismo, no podremos cambiar su valor.
Aunque con la propiedad value pueda parecer que no podemos modificar nuestros datos, sí existe una forma. Para ello, deberemos escuchar los eventos de cambio en el input, guardarlos y provocar un cambio de estado. Esto significa que debemos pasar un value que, en vez de ser fijo, sea un estado que pueda cambiar. De esta manera, nos aseguraremos de estar logrando controlar input en React.
Entonces, definiremos un estado en nuestra función LoginPage. A este estado lo llamaremos username y lo vamos a inicializar en un string vacío:
const [username, setUsername] = useState (‘ ‘)
Ahora que tenemos este estado, reemplazaremos el valor que hemos definido en nuestro input por este elemento. A continuación, puedes ver la línea de código que nos permite hacer esto:
<input type= “text” name=“username” value={username}></input>
Ahora que intentemos escribir sobre el input, seguiremos sin poder escribir. Esto sucede porque hemos inicializado el estado en un string vacío y se lo hemos pasado de esta forma al input. Por tanto, debemos usar el evento onChange para poder hacer que la propiedad value sea reflejo de nuestro estado. Para conocer más sobre este tema, te invitamos a leer nuestro post sobre el evento onChange en React.
¿Te animas a seguir aprendiendo?
Ahora que sabes cómo controlar input en React para manejar y manipular distintos datos, esperamos que quieras seguir aprendiendo sobre el mundo de la programación web. Si es así, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva e íntegra donde aprenderás a dominar, entre muchas otras herramientas, React, JavaScript, HTML y CSS. Así, en pocos meses, te convertirás en un experto del desarrollo web. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ya y transforma tu perfil profesional!
