React Complex Form
Daha önce acemice kendi yaptığım karmaşık yapılı javascript, jquery, vuejs ve php karışımı olan bir formum mevcut.
Birden fazla sekme (kullanıcının yaptığı tercihlere göre sekme sayısı 2-6 arasında değişiyor) ve sekmelerin içinde birbirini etkileyen ve ilgilendiren seçimler var. Bilgiler static yani herhangi bir apiden beslenmiyor.
Ben bu şekilde birbiri ile alaklı olan karışık yapıdaki formu en doğru mantıklı şekilde nasıl yapabilirim?
Ayrıca çok lisanlı şekilde çalışır durumda. Form doldurulduktan sonra Gönder veya PDF Kaydet gibi iki buton ile farklı işlevselliği olacak.
Mail gönderimi için NodeJS veya PHP ile api yazılacak.
Fakat bu kadar karışık bir formda ilerlemek veya güncelleme yapmak çok zor olacak.
Lisan için bilgiler bu şekilde array içinde tutuyorum.
Genel hatları ile form ve çalışması tamam sadece eksik bilgilerin girilmesi kaldı.
Daha akıllı ve basite indirgenmiş nasıl olabilir.
dependencies
react-bootstrap,
jspdf,
dateformat,
CUSTOMER_FORM_TITLE: [
"Müşteri Bilgileri",
"Customer Information",
"Informations client",
"Kundeninformationen ",
"",
"Информация для покупателей",
"Información de cliente",
"",
],
//Aşağıdaki şekilde kullanıyorum. workLang değişkenimde aktif lisan.
{Constants.CUSTOMER_FORM_TITLE[workLang]}
Örnek form görseli
https://prnt.sc/aioCMIEbi-Y2
Çözüm şu şekilde yaptım. Ortak bir onchange fonksiyonu olarak handleChange fonksiyonu yazdım.
Burada da aşağıdaki gibi handleChange içinde istediğim değişiklikleri yaptım. Sorunsuz çalışır duruma geldi.
Teknik olarak nasıl anlatılır bilemedim.
Fakat Change event içinde yapınca event bitiminde ekranı tekrar render ettiği için tüm tercihlerin son durumuna göre render etmiş oluyor gibime geldi.
onChange={(e) => { handleChange(e) }}
function handleChange(e) {
const name = e.target.name
const value = e.target.value;
setField(name, value);
if (name === "copMountType") {
console.log(name, value);
if (value === Constants.COP_MOUNT_TYPE_VAL[Constants.COP_MOUNT_TYPE_IDX_SURFACE]) {
changeCopModel(Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_A])
changeCopBending(Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C6])
} else if (value === Constants.COP_MOUNT_TYPE_VAL[Constants.COP_MOUNT_TYPE_IDX_FLUSH]) {
changeCopModel(Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_B])
changeCopBending(Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C4])
};
}
forceFormUpdate()
}