La interfaz se debe dividir en dos partes. Una en la que se puedan elegir los campos a agregar y otra donde se muestren los campos y se permita eliminarlos.
Se deben incluir, por lo menos, campos de tipo:
- Text
- Radio
- Select
- Se creó la aplicación de página única usando React.
$ npx create-react-app formulario-dinamico - Se instalaron en el proyecto las librerias adicionales a usar:
//Sweetalert2, para facilitar la configuración de los campos a agregar al formulario $ npm install sweetalert2 //Bootstrap, para agilizar el diseño $ npm install react-bootstrap bootstrap@5.1.3 - Se preparó el proyecto
- Primero se organizaron las carpetas y archivos
- Se preparó el main App.js para mostrar el componente formulario
- Los campos se cargan al formulario desde una archivo json, por lo que se generó el archivo con unos campos iniciales de ejemplo a mostrar
- Finalmente, teniendo todo preparado, se comenzó con el desarrollo del componente formulario
- Se vincula al estado del componente el archivo json, donde se leerán y guardaran los campos actuales del fomulario
- Dependiendo de la entrada, se pintan los campos (ejemplo con campo de texto)
- Para añadir un campo, se hace uso de Sweetalert2, que permite crear una ventana modal personalizable de forma sencilla. Así pues, al
añadir un campo, se abre un formulario para configurarlo, esto es, darle un título y nombrar opciones sí es un campo de tipo lista.
La estructura de un elemento sweetalert2 básico está dada por:- Configuración de elementos a visualizar
- Funciones de estado
Ejemplo - añadir campo de texto:
- Para eliminar un campo, solo se busca por su id, se elimina del archivo y se actualiza el estado
- Se vincula al estado del componente el archivo json, donde se leerán y guardaran los campos actuales del fomulario
- Primero se organizaron las carpetas y archivos
📧 pabloccervantes@gmail.com