¿Conoces los input de tipo radio y textarea en React? Los formularios en un proyecto de programación, sea cual sea el lenguaje que estás usando, son un elemento que nos permite crear espacios para que el usuario inserte todo tipo de datos.
En React, existen distintos tipos de inputs de formulario o datos que podemos insertar. Después de insertar estos datos, podemos ejecutar diversas acciones para procesar, enviar y devolver datos con nuestro servidor API. En este post, te enseñaremos qué son y cómo funcionan los input de tipo radio y textarea en React para que los uses en tus proyectos.
¿Qué son los input de tipo radio y textarea en React?
Los input de tipo radio y textarea en React son dos tipos de datos que podemos permitirle al usuario insertar en un formulario. A continuación, te enseñaremos en qué consiste exactamente cada uno de ellos.
Input de tipo textarea
La etiqueta textarea de HTML funciona de manera muy similar al input de tipo texto en React. Este tipo de input es el que usamos en nuestro post sobre crear una página de login en React. Allí, usamos el input de tipo texto para crear dos input: uno para el usuario y otro para la contraseña. Estos input son de texto, pues permiten al usuario escribir sus datos en formato de texto. Lo mismo hace textarea react.
Ten presente que textarea en React no es igual que textarea en HTML. Aquí, utilizamos la propiedad value para determinar el valor del input. En HTML, el valor está metido dentro del elemento, como si fuera un children. Para conocer más sobre la propiedad value en React, te invitamos a leer nuestro post sobre controlar input en React.
Como hemos mencionado antes, la etiqueta textarea en React funciona igual que el input de tipo texto. Es decir, podemos insertar la etiqueta textarea react como reemplazo de la etiqueta input en nuestro input de usuario y seguiría funcionando.
<textarea
name: "username"
value: {username}
onChange= {handleChange}
textarea/>Para conocer el contexto detrás de estas líneas de código, te invitamos a leer nuestro post sobre ejecutar un submit en React.
Input de tipo radio
Los input de tipo radio o react input radio y textarea en React son fáciles de entender porque existen otros tipos de dato que se manejan de manera similar. El input de tipo radio se maneja de una manera muy parecida al input de tipo checkbox en React. Esto quiere decir que este input hace uso de la propiedad checked para definir el valor del dato, a diferencia de textarea e input type=”text” ,que utilizan la propiedad value.
La diferencia entre el input de tipo checkbox y el input de tipo radio en React o react input radioes que no podemos tener un radio solo. Es decir, mientras checkbox no necesita ninguna otra propiedad para tener sentido, radio necesita un value. Entonces, cuando tenemos varios radio buttons, tenemos varias opciones, entre las que elegimos una. Por ello, lo normal es que los input de tipo radio en React se manejen en grupo. Dentro de este grupo, usamos la propiedad checked para definir cuál marcamos y utilizamos la propiedad value para distinguir las opciones.
Para conocer más sobre el input de tipo radio en React o react input radio, te invitamos a consultar la guía how to use radio buttons in Reactjs de PluralSight. Allí aprenderás a usar los botones de tipo radio en grupo para un formulario. Además, te sugerirán algunas librerías para estilizar tus botones en React, como pueden ser material-ui, react-radio-buttons y react-radio-button.
