Agregar dinámicamente nuevos campos a un formulario con React.js

Nov 29 2022

Hace poco estuve trabajando en un proyecto en el que tenía que agregar campos de forma condicional a un formulario y permitir que los usuarios agreguen más campos sobre la marcha a medida que los necesitan. Al principio, parecía ser difícil y, como el desarrollador perezoso que soy, busqué en Google para ver si alguien había hecho algo similar, pero no pude encontrar ninguno, así que me dispuse a construir uno desde cero.

Lo primero que hice fue dividir el problema en partes más pequeñas para poder pensarlo mejor. Noté que el formulario necesitaba hacer algunas cosas.

Cree una nueva línea de formulario.
Cree nuevos campos y agregue los campos a la nueva línea creada.
Agregar la nueva línea al formulario original
Gestiona el estado de las líneas de pedido desde el formulario.

Así que seguí adelante y creé los componentes para representar los pasos descritos anteriormente. Primero creé los campos como se muestra en el fragmento de código a continuación.

Lo siguiente que tenía que hacer era encontrar una manera de realizar un seguimiento de todos los componentes creados para que nuestro formulario se complete con estos. Para resolver ese problema, creé otro componente que actuará como el componente principal, realizando un seguimiento de cuántos elementos de línea se crean y representándolos a medida que se crean.

El componente comienza con una FormLine. Cuando el usuario hace clic en el botón Agregar elemento, se agrega un nuevo componente FormLine a la lista de componentes y el componente principal se vuelve a representar, mostrando el componente recién agregado.

Ahora que hemos resuelto los primeros tres problemas, el último problema y quizás el más interesante es cómo administrar el estado de las líneas de pedido desde el componente padre. El primer enfoque que utilicé fue enviar el estado de todo el componente de la línea de pedido al componente principal cuando el usuario se desenfoca del último campo de entrada de la línea de pedido. Sin embargo, pronto descubrí que el enfoque no escala bien, por ejemplo, cuando el usuario escribe en ambos campos y se vuelve borroso, pero luego vuelve al primer componente de entrada y hace una corrección, perdemos esa información.

Para solucionar ese problema, decidí que empujar el estado del componente de línea al componente principal en el desenfoque de cada campo sería el mejor enfoque aquí. Para lograr esto, necesitaríamos mantener una lista de elementos que permitan al componente agregar nuevos elementos a la lista y modificar un elemento en la lista. Para hacer esto, necesitaba agregar un campo de índice al estado de cada elemento de línea para poder encontrarlo y modificarlo fácilmente cuando sea necesario. Modifiqué el componente FormLine para tomar la función que reenvía su estado al componente principal como accesorio.

En el componente principal FormLineItems, escribí la función pushItem y la pasé al componente como apoyo. El componente ahora se ve así:

Ahora, cuando escriba texto en los campos y presione Agregar elemento, debería ver el estado actual del componente que se muestra arriba de los campos de texto.