Dynamiczne dodawanie nowych pól do formularza za pomocą React.js

Ostatnio pracowałem nad projektem, w którym musiałem warunkowo dodawać pola do formularza i umożliwiać użytkownikom dodawanie kolejnych pól w locie, gdy ich potrzebują. Na początku wydawało się to trudne i jako leniwy programista, którym jestem, poszukałem w Google, czy ktoś zrobił coś podobnego, ale nie mogłem znaleźć żadnego, więc postanowiłem zbudować go od podstaw. Poniżej znajduje się moja naiwna próba rozwiązania opisanego problemu. To nie jest idealne rozwiązanie i chciałbym uzyskać informacje zwrotne, jak je ulepszyć.

Pierwszą rzeczą, jaką zrobiłem, było rozbicie problemu na mniejsze części, abym mógł lepiej się nad nim zastanowić. Zauważyłem, że formularz wymaga wykonania kilku czynności.

1. Utwórz nową linię formularza.
2. Utwórz nowe pola i dodaj pola do nowo utworzonego wiersza.
3. Dodaj nową linię do oryginalnego formularza
4. Zarządzaj stanem pozycji z poziomu formularza.

Poszedłem więc dalej i stworzyłem komponenty reprezentujące kroki opisane powyżej. Najpierw utworzyłem pola, jak pokazano we fragmencie kodu poniżej.

Następną rzeczą, którą musiałem zrobić, było znalezienie sposobu na śledzenie wszystkich utworzonych takich komponentów, aby nasz formularz został nimi wypełniony. Aby rozwiązać ten problem, stworzyłem inny komponent, który będzie działał jako komponent nadrzędny, śledząc liczbę tworzonych elementów liniowych i renderując je w miarę ich tworzenia.

Komponent zaczyna się od jednej linii FormLine. Gdy użytkownik kliknie przycisk dodawania elementu, nowy komponent FormLine zostanie dodany do listy komponentów, a komponent nadrzędny zostanie ponownie wyrenderowany, pokazując nowo dodany komponent.

Teraz, gdy rozwiązaliśmy pierwsze trzy problemy, ostatnim problemem i być może najbardziej interesującym jest zarządzanie stanem elementów zamówienia z komponentu nadrzędnego. Pierwszym podejściem, którego użyłem, było wysłanie stanu całego komponentu elementu zamówienia do komponentu nadrzędnego, gdy użytkownik rozmyje ostatnie pole wprowadzania w elemencie zamówienia. Szybko jednak przekonałem się, że to podejście nie jest dobrze skalowalne, na przykład gdy użytkownik wpisze oba pola i rozmyje, ale potem wróci do pierwszego komponentu wejściowego i wprowadzi poprawkę, tracimy te informacje.

Aby rozwiązać ten problem, zdecydowałem, że najlepszym podejściem będzie przesunięcie stanu komponentu liniowego do komponentu nadrzędnego na rozmyciu każdego pola. Aby to osiągnąć, musielibyśmy utrzymywać listę elementów, która pozwala komponentowi dodawać nowe elementy do listy i modyfikować element na liście. Aby to zrobić, musiałem dodać pole indeksu do stanu każdej pozycji, aby móc łatwo wyszukiwać i modyfikować w razie potrzeby. Zmodyfikowałem komponent FormLine, aby przyjął funkcję, która przekazuje swój stan do komponentu nadrzędnego jako rekwizyt.

W nadrzędnym komponencie FormLineItems napisałem funkcję pushItem i przekazałem ją do komponentu jako rekwizyt. Komponent wygląda teraz tak:

Teraz, gdy wpiszesz tekst w pola i klikniesz dodaj element, powinieneś zobaczyć aktualny stan komponentu wyświetlany nad polami tekstowymi.

Kod do tego artykułu można znaleźć pod adresemhttps://gist.github.com/vdugeri/0a9f1972b80918b624e71b9aab35cb8e