React.js를 사용하여 양식에 새 필드를 동적으로 추가

저는 최근에 조건부로 양식에 필드를 추가하고 사용자가 필요에 따라 즉석에서 더 많은 필드를 추가할 수 있도록 허용해야 하는 프로젝트에서 작업하고 있었습니다. 처음에는 어려워 보였고 게으른 개발자처럼 비슷한 일을 한 사람이 있는지 Google 검색했지만 찾을 수 없었기 때문에 처음부터 시작했습니다. 다음은 방금 설명한 문제를 해결하려는 순진한 시도입니다. 이것은 완벽한 솔루션이 아니며 개선 방법에 대한 피드백을 받고 싶습니다.

내가 한 첫 번째 일은 문제를 더 잘 생각할 수 있도록 더 작은 조각으로 나누는 것이었습니다. 양식이 몇 가지 작업을 수행해야 한다는 것을 알았습니다.

1. 새 양식 라인을 만듭니다.
2. 새 필드를 만들고 생성된 새 줄에 필드를 추가합니다.
3. 원래 양식에 새 줄 추가
4. 양식에서 라인 항목의 상태를 관리합니다.

그래서 위에서 설명한 단계를 나타내는 구성 요소를 만들었습니다. 먼저 아래 코드 스니펫과 같이 필드를 생성했습니다.

다음으로 해야 할 일은 생성된 모든 구성 요소를 추적하여 양식이 이러한 구성 요소로 채워지도록 하는 방법을 찾는 것이었습니다. 이 문제를 해결하기 위해 부모 구성 요소 역할을 하는 또 다른 구성 요소를 만들어 얼마나 많은 선 요소가 생성되는지 추적하고 생성될 때 렌더링합니다.

구성 요소는 하나의 FormLine으로 시작합니다. 사용자가 항목 추가 버튼을 클릭하면 새 FormLine 구성 요소가 구성 요소 목록에 추가되고 상위 구성 요소가 다시 렌더링되어 새로 추가된 구성 요소가 표시됩니다.

이제 처음 세 가지 문제를 해결했으므로 마지막 문제이자 아마도 가장 흥미로운 문제는 상위 구성 요소에서 라인 항목의 상태를 관리하는 방법입니다. 내가 사용한 첫 번째 접근 방식은 사용자가 광고 항목의 마지막 입력 필드를 흐리게 처리할 때 전체 광고 항목 구성 요소의 상태를 상위 구성 요소로 보내는 것이었습니다. 그러나 곧 접근 방식이 제대로 확장되지 않는다는 것을 알게 되었습니다. 예를 들어 사용자가 두 필드에 모두 입력하고 흐리게 표시한 다음 첫 번째 입력 구성 요소로 돌아와 수정하면 해당 정보가 손실됩니다.

이 문제를 해결하기 위해 각 필드의 블러에서 선 구성 요소의 상태를 상위 구성 요소로 푸시하는 것이 최선의 방법이라고 결정했습니다. 이를 달성하려면 구성 요소가 목록에 새 항목을 추가하고 목록의 항목을 수정할 수 있도록 항목 목록을 유지 관리해야 합니다. 이렇게 하려면 필요할 때 쉽게 찾고 수정할 수 있도록 각 라인 항목의 상태에 인덱스 필드를 추가해야 했습니다. FormLine 구성 요소의 상태를 부모 구성 요소에 전달하는 기능을 소품으로 사용하도록 수정했습니다.

부모 FormLineItems 구성 요소에서 pushItem 함수를 작성하고 구성 요소에 소품으로 전달했습니다. 구성 요소는 이제 다음과 같습니다.

이제 필드에 텍스트를 입력하고 항목 추가를 누르면 텍스트 필드 위에 표시된 구성 요소의 현재 상태를 볼 수 있습니다.

이 문서의 코드는 다음에서 찾을 수 있습니다.https://gist.github.com/vdugeri/0a9f1972b80918b624e71b9aab35cb8e