Toda aplicación web requiere una forma de interacción con el usuario. Los formularios en React son un tipo de elemento HTML que nos permite crear interacción al pedirle datos al usuario, sean archivos, textos o selecciones. Para ello, los formularios utilizan un elemento llamado input. En este post, te enseñaremos los tipos de input en React que hay para que los utilices en tus propias aplicaciones.
¿Qué son los input en React?
Los input en React son un tipo de elemento que podemos utilizar cuando creamos formularios, un elemento HTML del que puedes aprender más en nuestro post sobre formularios en React. Los input dentro de un formulario son el elemento que usamos para pedirle datos al usuario de distintos modos. El input más común es el input de tipo text, pues es el que nos permite crear formularios en los que el usuario puede insertar su contraseña y correo. Puedes encontrar un ejemplo del uso de este tipo de input en nuestro post sobre crear una página de login en React.
Además del input en React de tipo text, existen tres otros tipos de input en React. Asimismo, tenemos a disposición dos etiquetas que también sirven como input, y que son tipos de input, aunque se nombran de otra manera: Estos tipos de input son textarea y select. A continuación, te enseñaremos cuáles son los tipos de input en React.
¿Cuáles son los tipos de input en React?
Como ya hemos mencionado, existen distintos tipos de input en React. Algunos se reconocen por usar la etiqueta input y variar en su comportamiento según la propiedad type que le pasemos a la etiqueta. Otros tipos de input usan otras etiquetas, sin embargo, cumplen la misma función de crear un objeto con el que el usuario puede interactuar y otorgarnos datos.
Todos estos tipos de input en React se comportan de diferentes maneras. La diferencia principal entre estos tipos de input es el uso de la propiedad value vs la propiedad checked para definir el valor del dato.
Las etiquetas que no siguen la regla de input son las siguientes (como puedes leer, se comportan de una manera muy similar a otras input):
- <textarea>: este tipo de input es muy similar al input en React de tipo text. Su propósito es el mismo, pues crea un objeto en el que el usuario inserta datos en formato de texto. Del mismo modo, utilizamos la propiedad value para guardar el valor del dato. Es decir, la etiqueta textarea puede sustituir el input react de tipo text. Puedes conocer más sobre esta etiqueta en nuestro post sobre input de tipo radio y textarea en React.
- <select>: la etiqueta select en React nos permite crear un objeto desplegable con distintas opciones, entre las que el usuario puede elegir una. En este sentido, es muy similar al input de tipo radio.
Además de las etiquetas anteriores, existen cuatro tipos de input en React que tienen la misma etiqueta input, pero propiedades type distintas:
- <input type=“text”/>: este input react crea un objeto en el que se puede insertar un texto.
- <input type=“checkbox”/>: como su nombre indica, el input de tipo checkbox en React crea una caja que podemos pinchar o deshinchar para seleccionar su valor. Esta caja usa la propiedad checked para definir el valor del dato, en lugar de la propiedad value.
- <input type=“radio”/>: en el input de tipo radio también utilizamos la propiedad checked. La diferencia aquí es que, como este input normalmente se trabaja en grupos de elementos para definir las distintas opciones, usamos checked para el elemento seleccionado y value para los valores de cada opción.
- <input type=“file”/>: este último input nos permite crear un botón que le pide al usuario insertar un archivo. Al ser un dato que depende al cien por cien del usuario, es el único input react automáticamente no controlado (uncontrolled).
Especificar null o undefined en la propiedad value de nuestros input convierte al dato en uncontrolled. Como puedes leer en nuestro post sobre formularios como componentes controlados en React, los formularios suelen ser elementos que controlamos desde nuestro estado. Es decir, nosotros decidimos cómo se ven por pantalla.
Esto es diferente a los datos en HTML, que normalmente son componentes no controlados porque son procesados por el DOM y no el estado. Entonces, cuando converitmos un input a uncontrolled estamos haciendo que la fuente de verdad (source of truth) sea el DOM y no nuestro estado.
¿Quieres seguir aprendiendo?
Ahora que sabes cuáles son los tipos de input en React, estás más cerca de dominar esta poderosa librería JavaScript. Sin embargo, todavía hay mucho que aprender sobre esta y otras herramientas del desarrollo web. Por ello, te invitamos a seguir aprendiendo con nosotros en el Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar con herramientas y lenguajes como React, JavaScript, CSS y HTML. ¿Quieres seguir aprendiendo y darle un giro a tu vida? ¡Anímate a inscribirte!
