Adicionando dinamicamente novos campos a um formulário com React.js

Recentemente, trabalhei em um projeto em que precisava adicionar campos condicionalmente a um formulário e permitir que os usuários adicionassem mais campos em tempo real, conforme necessário. No começo, parecia ser difícil e, como desenvolvedor preguiçoso que sou, pesquisei no Google para ver se alguém havia feito algo semelhante, mas não consegui encontrar, então comecei a construir um do zero. O que se segue é minha tentativa ingênua de resolver o problema que acabei de descrever. Esta não é uma solução perfeita e eu adoraria receber algum feedback sobre como torná-la melhor.

A primeira coisa que fiz foi dividir o problema em partes menores para poder pensar melhor. Percebi que o formulário precisava fazer algumas coisas.

1. Crie uma nova linha de formulário.
2. Crie novos campos e adicione os campos à nova linha criada.
3. Adicione a nova linha ao formulário original
4. Gerencie o estado dos itens de linha no formulário.

Então fui em frente e criei os componentes para representar as etapas descritas acima. Primeiro criei os campos conforme mostrado no trecho de código abaixo.

A próxima coisa que eu precisava fazer era descobrir uma maneira de controlar todos esses componentes criados para que nosso formulário fosse preenchido com eles. Para resolver esse problema, criei outro componente que atuará como o componente pai, controlando quantos elementos de linha são criados e renderizando-os à medida que são criados.

O componente começa com um FormLine. Quando o usuário clica no botão adicionar item, um novo componente FormLine é adicionado à lista de componentes e o componente pai é renderizado novamente, mostrando o componente recém-adicionado.

Agora que resolvemos os três primeiros problemas, o último problema e talvez o mais interessante é como gerenciar o estado dos itens de linha do componente pai. A primeira abordagem que usei foi enviar o estado de todo o componente do item de linha para o componente pai quando o usuário desfocar o último campo de entrada no item de linha. No entanto, logo descobri que a abordagem não escala bem, por exemplo, quando o usuário digita em ambos os campos e desfoca, mas volta ao primeiro componente de entrada e faz uma correção, perdemos essa informação.

Para corrigir esse problema, decidi que enviar o estado do componente de linha para o componente pai no desfoque de cada campo seria a melhor abordagem aqui. Para conseguir isso, precisaríamos manter uma lista de itens que permitisse ao componente adicionar novos itens à lista e modificar um item da lista. Para fazer isso, precisei adicionar um campo de índice ao estado de cada item de linha para poder encontrá-lo e modificá-lo facilmente quando necessário. Eu modifiquei o componente FormLine para levar a função que encaminha seu estado para o componente pai como prop.

No componente pai FormLineItems, escrevi a função pushItem e a passei para o componente como um suporte. O componente agora se parece com isso:

Agora, quando você digitar texto nos campos e clicar em adicionar item, deverá ver o estado atual do componente exibido acima dos campos de texto.

Você pode encontrar o código deste artigo emhttps://gist.github.com/vdugeri/0a9f1972b80918b624e71b9aab35cb8e