Tự động thêm các trường mới vào biểu mẫu bằng React.js

Gần đây tôi đang làm việc trên một dự án trong đó tôi phải thêm các trường vào biểu mẫu một cách có điều kiện và cho phép người dùng thêm nhiều trường hơn một cách nhanh chóng khi họ cần. Lúc đầu, nó có vẻ khó khăn và giống như một nhà phát triển lười biếng, tôi đã tìm kiếm trên Google để xem có ai đã làm điều gì đó tương tự không nhưng tôi không thể tìm thấy bất kỳ thứ gì nên tôi bắt đầu xây dựng một cái từ đầu. Những gì tiếp theo là nỗ lực ngây thơ của tôi trong việc giải quyết vấn đề vừa được mô tả. Đây không phải là một giải pháp hoàn hảo và tôi rất muốn nhận được một số phản hồi về cách làm cho nó tốt hơn.

Điều đầu tiên tôi làm là chia vấn đề thành nhiều phần nhỏ hơn để tôi có thể suy nghĩ về nó tốt hơn. Tôi nhận thấy rằng biểu mẫu cần thiết để thực hiện một số điều.

1. Tạo một dòng biểu mẫu mới.
2. Tạo các trường mới và thêm các trường vào dòng mới được tạo.
3. Thêm dòng mới vào biểu mẫu ban đầu
4. Quản lý trạng thái của các mục hàng từ biểu mẫu.

Vì vậy, tôi đã tiếp tục và tạo các thành phần để thể hiện các bước đã nêu ở trên. Đầu tiên, tôi tạo các trường như trong đoạn mã bên dưới.

Điều tiếp theo tôi cần làm là tìm ra cách theo dõi tất cả các thành phần như vậy được tạo để biểu mẫu của chúng tôi sẽ được phổ biến với những thành phần này. Để giải quyết vấn đề đó, tôi đã tạo một thành phần khác sẽ đóng vai trò là thành phần chính, theo dõi xem có bao nhiêu phần tử đường được tạo và hiển thị chúng khi chúng được tạo.

Thành phần bắt đầu với một FormLine. Khi người dùng nhấp vào nút thêm mục, một thành phần FormLine mới sẽ được thêm vào danh sách các thành phần và thành phần chính được kết xuất lại, hiển thị thành phần mới được thêm vào.

Bây giờ chúng ta đã giải quyết được ba vấn đề đầu tiên, vấn đề cuối cùng và có lẽ là vấn đề thú vị nhất là cách quản lý trạng thái của các mục hàng từ thành phần chính. Cách tiếp cận đầu tiên tôi sử dụng là gửi trạng thái của toàn bộ thành phần mục hàng lên thành phần chính khi người dùng làm mờ trường nhập cuối cùng trên mục hàng. Tuy nhiên, tôi sớm phát hiện ra rằng cách tiếp cận này không mở rộng quy mô tốt, chẳng hạn như khi người dùng nhập vào cả hai trường và bị mờ, nhưng sau đó quay lại thành phần đầu vào đầu tiên và thực hiện chỉnh sửa, chúng tôi sẽ mất thông tin đó.

Để khắc phục sự cố đó, tôi quyết định rằng việc đẩy trạng thái của thành phần dòng sang thành phần chính trên độ mờ của từng trường sẽ là cách tiếp cận tốt nhất ở đây. Để đạt được điều này, chúng ta cần duy trì một danh sách các mục cho phép thành phần thêm các mục mới vào danh sách và sửa đổi một mục trong danh sách. Để làm điều này, tôi cần thêm một trường chỉ mục vào trạng thái của từng mục hàng để tôi có thể dễ dàng tìm và sửa đổi khi cần. Tôi đã sửa đổi thành phần FormLine để lấy chức năng chuyển tiếp trạng thái của nó sang thành phần chính làm chỗ dựa.

Trong thành phần FormLineItems gốc, tôi đã viết hàm pushItem và chuyển nó vào thành phần dưới dạng chỗ dựa. Thành phần bây giờ trông như thế này:

Bây giờ khi bạn nhập văn bản vào các trường và nhấn vào mục thêm, bạn sẽ thấy trạng thái hiện tại của thành phần được hiển thị phía trên các trường văn bản.

Bạn có thể tìm thấy mã cho bài viết này tạihttps://gist.github.com/vdugeri/0a9f1972b80918b624e71b9aab35cb8e