Menambahkan bidang baru secara dinamis ke formulir dengan React.js

Nov 29 2022

Saya baru-baru ini mengerjakan sebuah proyek di mana saya harus menambahkan bidang secara kondisional ke formulir dan mengizinkan pengguna untuk menambahkan lebih banyak bidang dengan cepat saat mereka membutuhkannya. Pada awalnya, tampaknya sulit dan seperti pengembang yang malas, saya mencari di Google untuk melihat apakah ada yang telah melakukan hal serupa tetapi saya tidak dapat menemukannya, jadi saya mulai membangunnya dari awal. Berikut ini adalah upaya naif saya untuk memecahkan masalah yang baru saja dijelaskan. Ini bukan solusi yang sempurna dan saya ingin mendapatkan umpan balik tentang cara membuatnya lebih baik.

Hal pertama yang saya lakukan adalah memecah masalah menjadi bagian-bagian kecil sehingga saya bisa memikirkannya dengan lebih baik. Saya perhatikan bahwa formulir diperlukan untuk melakukan beberapa hal.

Buat baris formulir baru.
Buat bidang baru dan tambahkan bidang ke baris baru yang dibuat.
Tambahkan baris baru ke formulir aslinya
Kelola status item baris dari formulir.

Jadi saya melanjutkan dan membuat komponen untuk mewakili langkah-langkah yang diuraikan di atas. Pertama saya membuat bidang seperti yang ditunjukkan pada cuplikan kode di bawah ini.

Hal berikutnya yang perlu saya lakukan adalah mencari cara untuk melacak semua komponen yang dibuat sehingga formulir kami akan diisi dengan ini. Untuk mengatasi masalah itu saya membuat komponen lain yang akan bertindak sebagai komponen induk, melacak berapa banyak elemen garis yang dibuat dan merendernya saat dibuat.

Komponen dimulai dengan satu FormLine. Saat pengguna mengklik tombol tambahkan item, komponen FormLine baru ditambahkan ke daftar komponen dan komponen induk dirender ulang, menampilkan komponen yang baru ditambahkan.

Sekarang kita telah memecahkan tiga masalah pertama, masalah terakhir dan mungkin yang paling menarik adalah bagaimana mengelola status item baris dari komponen induk. Pendekatan pertama yang saya gunakan adalah mengirimkan status seluruh komponen item baris ke komponen induk saat pengguna mengaburkan kolom input terakhir pada item baris. Namun, saya segera menemukan bahwa pendekatannya tidak menskalakan dengan baik, misalnya, ketika pengguna mengetik di kedua bidang dan kabur, tetapi kemudian kembali ke komponen input pertama dan melakukan koreksi, kami kehilangan informasi itu.

Untuk memperbaiki masalah itu, saya memutuskan bahwa mendorong status komponen garis ke komponen induk pada keburaman setiap bidang akan menjadi pendekatan terbaik di sini. Untuk mencapai ini, kita perlu mempertahankan daftar item yang memungkinkan komponen menambahkan item baru ke daftar dan memodifikasi item dalam daftar. Untuk melakukan ini, saya perlu menambahkan kolom indeks ke status setiap item baris agar saya dapat dengan mudah menemukan dan memodifikasi saat diperlukan. Saya memodifikasi komponen FormLine untuk mengambil fungsi yang meneruskan statusnya ke komponen induk sebagai penyangga.

Di komponen induk FormLineItems, saya menulis fungsi pushItem dan meneruskannya ke komponen sebagai penyangga. Komponen sekarang terlihat seperti ini:

Sekarang saat Anda mengetik teks ke dalam bidang dan menekan item tambahan, Anda akan melihat status komponen saat ini ditampilkan di atas bidang teks.