¿Sabes qué son los input de tipo checkbox en React? ¿Sabes qué es un checkbox? Los formularios en React son un tipo de elemento que nos permite crear espacios en donde el usuario inserta sus datos. Estos datos luego serán enviados y procesados en nuestro servidor para cumplir diversas funciones. En este post, te enseñaremos qué es y cómo funciona el input de tipo checkbox en React, uno de los tipos de datos a insertar en un formulario.
Un poco de contexto
En nuestro post sobre los formularios como componentes controlados en React, te hemos mencionado que los formularios en esta librería JavaScript se controlan desde nuestro estado. Esto quiere decir que el valor que vemos en la pantalla de nuestro input es simplemente un reflejo del estado del componente. En React, existen varios tipos de valores en un formulario y el más común es el input de tipo text.
En nuestro post sobre ejecutar un submit en React, te hemos acompañado en el proceso de enviar un dato creado con un input de tipo text. Este tipo de input nos permite crear un espacio donde el usuario puede escribir texto. Este texto será el valor de nuestro input, al que manipulamos y accedemos con la propiedad value. Para aprender más sobre esto, puedes leer nuestro post sobre controlar input en React.
¿Qué es el input de tipo checkbox en React?
El input de tipo checkbox en React es una de las opciones que tenemos para insertar datos en un formulario. Como su nombre indica, esta opción se basa en crear una caja que puede ser pinchada o deshinchada. Entonces, mientras que la caja es el input checkbox, el estado de esta caja será nuestro dato o valor. Para controlar un input de tipo checkbox, debemos insertar la propiedad checked en lugar de value.
Para insertar un input de tipo checkbox en React, hacemos el mismo procedimiento que con un input de tipo text. Como su nombre indica, la diferencia se concentrará en la propiedad type. A continuación, te presentamos la línea de código que nos permite crear este input checkbox:
<input type= «checkbox» />
Con la línea de código anterior hemos creado un input checkbox en React. Sin embargo, este input será un componente no controlado. Para poder controlar este dato, debemos usar la propiedad checked con los valores true o false. Es decir, si le pasamos el valor true:
<input type= «checkbox» checked: true/>
Y si le pasamos el valor false:
<input type= «checkbox» checked: false/>
Así como con la propiedad value, la propiedad checked en un input de tipo checkbox en React define un valor estático. Es decir, el usuario no podrá cambiar este valor cuando lo definimos de esta manera. Entonces, para poder cambiar el valor de esta caja, deberemos usar un estado en React, es decir, un dato que cambia con el tiempo. El estado que creemos para nuestro input checkbox puede tener la misma lógica que los que te hemos presentado en nuestro post sobre unir estados en React.
Después de crear un estado para guardar el valor del input de tipo checkbox en React, usaremos el evento onChange en React para capturar el evento y modificar el estado.
Por tanto, la lógica de un input «checkbox» es la misma que un input «text», la única diferencia real es que usamos la propiedad checked en vez de value. Es decir, usaremos el comando event.target.checked en vez de event.target.value.
¿Quieres seguir aprendiendo?
Ahora que sabes qué es y cómo funciona el input de tipo checkbox en React, ¡estás más cerca de aprender a dominar esta poderosa librería de JavaScript! Para seguir aprendiendo a desarrollar, no solo con React sino también con lenguajes como HTML, CSS y JavaScript, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp. Con este programa de formación intensiva e íntegra, ¡te convertirás en un experto del desarrollo web en pocos meses! ¿A qué esperas para empezar? ¡Inscríbete ya y aprende más sobre checkbox en react!
