Los formularios en React se pueden manejar de dos maneras. En este post, te enseñaremos cómo manejar formularios como componentes no controlados en React al acceder al DOM.
¿Qué son los formularios como componentes no controlados en React?
Como puedes leer en nuestro post sobre formularios en React, en esta librería existen dos maneras de crear formularios: de manera controlada o no controlada. Usualmente, manejamos los formularios como componentes controlados en React, pues la lógica de estado en esta herramienta nos permite controlar los datos que llegan al formulario y lo que se hace con ellos. En este método, la fuente de verdad de los distintos input es el estado. Es decir, todo lo que vemos en pantalla es lo que está dentro del estado.
La otra manera de crear forms es manejar los formularios como componentes no controlados en React. Esto quiere decir que los datos de los inputs se manejan en el DOM, en lugar del estado en React. De este modo, el DOM se vuelve la fuente de verdad de nuestros datos.
¿Cómo funcionan?
Los formularios como componentes no controlados en React son posibles gracias al concepto de las refs y el DOM en React, un mecanismo que nos permite acceder a los elementos del DOM y manipularlos desde nuestro código React.
Como puedes haber leído en nuestros posts sobre para qué sirven las refs en React y pasar una ref en React, podemos usar las refs como valor de la propiedad ref en un componente de tipo clase o un elemento HTML. Esto nos permite guardarlos dentro de nuestra referencia.
Entonces, para crear formularios como componentes no controlados, basta con pasarle una ref al input. Esto nos permitirá guardarlo y acceder a todo su API. Es decir, podemos acceder al valor que tiene en ese momento. Para ello, podemos insertar el comando ref.current.value.
Manejar los formularios como componentes no controlados en React es bueno cuando no queremos tener los datos dentro del formulario ni controlar los inputs, sino simplemente acceder a ellos cuando necesitemos ejecutar un submit. Para ello, hacemos algo como el proceso que te explicamos a continuación.
Definimos una ref en el constructor para acceder al elemento input. Lo podemos hacer con React.createRef o con el hook useRef:
this.input = React.createRef ( );En el submit podemos acceder al valor del input a través de la ref:
handleSubmit (event) {
event.preventDefault ( );
console.log ('A name was submitted:' ${this.input.current.value}');
}
Finalmente, pasamos la ref al elemento input:
<form onSubmit= {this.handleSubmit}>
<label htmlFor="query">
Name:
<input name="query" type="text" ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>Ten presente que el input de tipo file en React es un dato no controlado, porque no le puedes dar ningún value. Por ello, lo podrás manejar como quieras. Puedes manejar el evento onChange y guardar sus cambios desde un estado o ref, o pasar una ref al input y recoger su valor con un comando como this.input.current.files.
Ahora que sabes cómo usar los formularios como componentes no controlados en React, ¡te invitamos a usarlos en tus propios proyectos! Por ello, te recomendamos nuestro Bootcamp Desarrollo Web Full Stack, un espacio donde aprenderás a desarrollar todo tipo de proyectos de programación para la web en pocos meses. ¡No te lo pierdas y da el paso que impulsará tu carrera!
