Cómo construir un formulario de reacción robusto con React-Hook-Form y Material UI

Nov 06 2022
Un formulario ayuda a un sitio web a recopilar datos de sus visitantes y, la mayoría de las veces, a enviarlos a un servidor. En aquel entonces, era bastante fácil desarrollar un formulario.

Un formulario ayuda a un sitio web a recopilar datos de sus visitantes y, la mayoría de las veces, a enviarlos a un servidor. En aquel entonces, era bastante fácil desarrollar un formulario. Pero hoy en día, con las tecnologías modernas y los requisitos más complejos, se vuelve un poco más difícil construir la forma.

El comportamiento predeterminado de los formularios HTML

Crear un formulario, que recopila datos y los envía al servidor, es relativamente fácil en PHP. Cree un formulario que envíe los datos a la misma ruta con un método POST. Luego, los datos se pueden validar y guardar en una base de datos. Si desea cambiar la URL y el método HTTP, solo ajuste el atributo actiony .method

La manera de reaccionar

En React, se vuelve un poco más complejo porque tienes que implementar tu propia lógica de envío. Esto significa que debe extraer los valores de los campos de entrada y enviar una solicitud HTTP manualmente. Las funciones integradas, como la validación, también debe implementarlas usted mismo.

No obstante, hay dos formas de manejar los datos de los campos de entrada.

estado controlado

Una forma es crear un estado que contenga el valor de una entrada y actualizarlo a través de un detector de eventos. Siempre manejas el valor de la entrada. Esto le da un control completo sobre el valor de un campo de entrada. El beneficio de esta forma es que puede crear una interfaz de usuario reactiva. La desventaja es que la función de renderizado se activa mucho.

Estado descontrolado

La otra forma es crear un refcon la useRef()función y pasarlo al refatributo del elemento de entrada. Si desea recuperar los datos, puede hacerlo desde el refby ref.current.value. La ventaja de este método es que render()se activa con menos frecuencia. Una gran desventaja es que no se le informará si el valor de la entrada está cambiando. Para eso, debe agregar un detector de eventos adicionalmente.

El problema con los formularios en React

Si desea implementar un formulario complejo con validación y manejo de errores, entonces hay muchas posibilidades de que el código se desordene. O tiene que usar varios useState()ganchos y crear varios estados para cada valor de entrada, o tiene que crear un estado con un objeto que contenga cada valor (y estado de validación/error) de los campos de entrada. Luego, este objeto debe manejarse a través del useReducergancho y una switchdeclaración larga.

Formulario con dos entradas construido con useReducer (se incluye validación y manejo de errores)

Bibliotecas externas

Usaremos bibliotecas externas como Material UI y React Hook Form para reducir la complejidad del código. Harán que nuestro código sea más mantenible y legible.

Interfaz de usuario de materiales

MUI ofrece un conjunto completo de herramientas de interfaz de usuario para ayudarlo a enviar nuevas funciones más rápido
: mui.com

Material UI tiene múltiples componentes de formulario que mejorarán la experiencia del desarrollador:

  • Campo de texto : permita que el usuario ingrese y edite texto
  • Seleccionar : permite que el usuario seleccione un valor de una lista de opciones
  • Casilla de verificación : permitir que el usuario marque una opción

Formularios eficaces, flexibles y extensibles con validación fácil de usar.
— react-hook-form.com

Con React Hook Form podemos subcontratar la mayor parte de la lógica redundante en la biblioteca y reducir la complejidad del código en nuestra propia base de código. React Hook Form ofrece funcionalidad para integrarlo con Material UI.

Para combinar Material UI con React Hook Form, usaremos el Controllercomponente.

Empecemos

Puede acceder al código en CodeSandBox aquí .

Instalación

Antes de comenzar, debemos instalar nuestras dos bibliotecas a través de npm o yarn.

npm install @mui/material @emotion/react @emotion/styled react-hook-form
or
yarn add @mui/material @emotion/react @emotion/styled react hook-form

Cree un directorio components/core/forme implemente los siguientes componentes de formulario.

Campo de texto

campo de texto.js

Seleccione

Seleccionar.js

Caja

Cree un formulario con los componentes del formulario

Con los componentes anteriores, ahora podemos crear formularios mucho más fácilmente.

Aplicación.js

Conclusión

Con la implementación anterior, es evidente que el código es mucho más limpio y más amigable para los desarrolladores. Un código limpio mejora la mantenibilidad del código y evita la deuda técnica.

Si desea obtener más información sobre Clean Code, no dude en leer mi publicación de blog sobre Clean Code aquí:

Escribir código limpio + ejemplos en TypeScript

© Copyright 2021 - 2022 | unogogo.com | All Rights Reserved