Manejo de formularios en React

Cómo gestionar formularios en una aplicación React

Los formularios son uno de los pocos elementos HTML que son interactivos de forma predeterminada.

Fueron diseñados para permitir al usuario interactuar con una página.

¿Usos comunes de los formularios?

• Buscar
• Formularios de contacto
• Pago en carritos de compra
• Iniciar sesión y registrarse
• ¡y mucho más!

Usando React podemos hacer nuestros formularios mucho más interactivos y menos estáticos.

Hay dos formas principales de manejar formularios en React, que difieren en un nivel fundamental: cómo se gestionan los datos.

• Si los datos son manejados por el DOM, los llamamos componentes no controlados.
• Si los datos son manejados por los componentes los llamamos componentes controlados

Como puedes imaginar, los componentes controlados son los que usarás la mayor parte del tiempo. El estado del componente es la única fuente de verdad, en lugar del DOM. Pero a veces te ves obligado a usar componentes no controlados, por ejemplo, cuando usas algunos campos de formulario que son inherentemente no controlados debido a su comportamiento, como el input type="file"campo.

Cuando cambia el estado de un elemento en un campo de formulario administrado por un componente, lo rastreamos mediante el onChangeatributo .

class Form extends React.Component { constructor(props) { super(props) this.state = { username: '' } } handleChange(event) {} render() { return ( form Username: input type="text" value={this.state.username} onChange={this.handleChange} / /form ) }}

Con componentes de clase, para poder establecer el nuevo estado, debemos vincularnos thisal handleChangemétodo, de lo contrario thisno será accesible desde dentro de ese método:

class Form extends React.Component { constructor(props) { super(props) this.state = { username: '' } this.handleChange = this.handleChange.bind(this) } handleChange(event) { this.setState({ username: event.target.value }) } render() { return ( form input type="text" value={this.state.username} onChange={this.handleChange} / /form ) }}

De manera similar, utilizamos el onSubmitatributo en el formulario para llamar al handleSubmitmétodo cuando se envía el formulario:

class Form extends React.Component { constructor(props) { super(props) this.state = { username: '' } this.handleChange = this.handleChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) } handleChange(event) { this.setState({ username: event.target.value }) } handleSubmit(event) { alert(this.state.username) event.preventDefault() } render() { return ( form onSubmit={this.handleSubmit} input type="text" value={this.state.username} onChange={this.handleChange} / input type="submit" value="Submit" / /form ) }}

Usando ganchos todo es mucho más sencillo:

const Form = props = { const [username, setUsername] = useState() const handleChangeUsername = e = { setUsername(e.target.value) } const handleSubmit = event = { alert(username) event.preventDefault() } render() { return ( form onSubmit={handleSubmit} Username: input type="text" value={username} onChange={handleChangeUsername} / /form ) }}

La validación en un formulario se puede gestionar en el handleChangemétodo: se tiene acceso al valor anterior del estado y al nuevo. Se puede comprobar el nuevo valor y, si no es válido, rechazar el valor actualizado (y comunicárselo de alguna manera al usuario).Te recomendamos Mejores Opiniones y reviews

Los formularios HTML son inconsistentes. Tienen una larga historia y eso se nota. Sin embargo, React hace que las cosas sean más consistentes para nosotros y puedes obtener (y actualizar) campos usando su valueatributo.

He aquí un textareaejemplo:

textarea value={this.state.address} onChange={this.handleChange} /

Lo mismo ocurre con la selectetiqueta:

select value="{this.state.age}" onChange="{this.handleChange}" option value="teen"Less than 18/option option value="adult"18+/option/select

Ya hemos mencionado el input type="file"campo, que funciona de forma un poco diferente.

En este caso, necesita obtener una referencia al campo asignando el refatributo a una propiedad definida en el constructor con React.createRef(), y usarla para obtener su valor en el controlador de envío:

class FileInput extends React.Component { constructor(props) { super(props) this.curriculum = React.createRef() this.handleSubmit = this.handleSubmit.bind(this) } handleSubmit(event) { alert(this.curriculum.current.files[0].name) event.preventDefault() } render() { return ( form onSubmit={this.handleSubmit} input type="file" ref={this.curriculum} / input type="submit" value="Submit" / /form ) }}

Esta es la forma de los componentes no controlados . El estado se almacena en el DOM en lugar de en el estado del componente (observe que solíamos this.curriculumacceder al archivo cargado y no hemos tocado el state.

Sé lo que estás pensando: más allá de esos conceptos básicos, debe haber una biblioteca que simplifique todo este asunto del manejo de formularios y automatice la validación, el manejo de errores y más, ¿no es así? Existe una excelente: Formik.

→ Consigue mi Manual para principiantes de React

Escribí 17 libros para ayudarte a convertirte en un mejor desarrollador. Descárgalos todos sin costo uniéndote a mi boletín informativo.

ÚNETE A MI CAMPAMENTO DE CODIFICACIÓN , un increíble curso de cohorte que será un gran paso adelante en tu carrera de codificación: cubre React, Next.js; próxima edición, febrero de 2025

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

C\xC3\xB3mo gestio...') #2 /home/fromthes/microblog/index.php(1812): require_once('/home/fromthes/...') #3 {main}

Manejo de formularios en React

Los formularios son uno de los pocos elementos HTML que son interactivos de forma predeterminada. Cómo gestionar formularios en una aplicación React Cómo ge

programar

es

2025-01-16

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente