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
Benzer şekilde formik kullanarak dokümanında gösterilen örnek üzerinden bir deneme yaptım.
Eğer benim bir hatam yoksa aynı şekilde büküm seçenekleri yine eski durumlar geliyor.
import { useState } from "react";
import { Formik } from "formik";
import Constants from "../../constants/Constants";
const FormikForm = () => {
const [workLang, setWorkLang] = useState(Constants.TR)
return (
<>
<Formik
initialValues={{
email: "",
copMountType: Constants.COP_MOUNT_TYPE_VAL[Constants.COP_MOUNT_TYPE_IDX_SURFACE],
copModel: Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_A],
copBending: Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C6],
}}
validate={values => {
const errors = {};
if (!values.email) {
errors.email = 'Required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
/* and other goodies */
}) => (
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
onChange={(e) => {
handleChange(e)
console.log(values);
}}
onBlur={handleBlur}
value={values.email}
/>
{errors.email && touched.email && errors.email}
<select
name="copMountType"
onChange={(e) => {
handleChange(e)
console.log("MT", values);
if (values.copMountType === Constants.COP_MOUNT_TYPE_VAL[Constants.COP_MOUNT_TYPE_IDX_FLUSH]) {
values.copModel = "B"
values.copBending = "C4"
} else if (values.copMountType === Constants.COP_MOUNT_TYPE_VAL[Constants.COP_MOUNT_TYPE_IDX_SURFACE]) {
values.copModel = "A"
values.copBending = "C7"
}
}}
onBlur={handleBlur}
value={values.copMountType}
>
<option value={Constants.COP_MOUNT_TYPE_VAL[Constants.COP_MOUNT_TYPE_IDX_SURFACE]}>{Constants.COP_MOUNT_TYPE[workLang][Constants.COP_MOUNT_TYPE_IDX_SURFACE]}</option>
<option value={Constants.COP_MOUNT_TYPE_VAL[Constants.COP_MOUNT_TYPE_IDX_FLUSH]}>{Constants.COP_MOUNT_TYPE[workLang][Constants.COP_MOUNT_TYPE_IDX_FLUSH]}</option>
</select>
{errors.copMountType && touched.copMountType && errors.copMountType}
<select
name="copModel"
onChange={(e) => {
handleChange(e)
console.log("MD", values);
}}
onBlur={handleBlur}
value={values.copModel}
>
{values.copMountType === Constants.COP_MOUNT_TYPE_VAL[Constants.COP_MOUNT_TYPE_IDX_SURFACE] &&
<>
<option value={Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_A]}>{Constants.COP_MODEL[workLang][Constants.COP_MODEL_IDX_A]}</option>
<option value={Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_N]}>{Constants.COP_MODEL[workLang][Constants.COP_MODEL_IDX_N]}</option>
<option value={Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_D]}>{Constants.COP_MODEL[workLang][Constants.COP_MODEL_IDX_D]}</option>
<option value={Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_Y]}>{Constants.COP_MODEL[workLang][Constants.COP_MODEL_IDX_Y]}</option>
</>
}
{values.copMountType === Constants.COP_MOUNT_TYPE_VAL[Constants.COP_MOUNT_TYPE_IDX_FLUSH] &&
<>
<option value={Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_B]}>{Constants.COP_MODEL[workLang][Constants.COP_MODEL_IDX_B]}</option>
<option value={Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_P]}>{Constants.COP_MODEL[workLang][Constants.COP_MODEL_IDX_P]}</option>
<option value={Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_V]}>{Constants.COP_MODEL[workLang][Constants.COP_MODEL_IDX_V]}</option>
</>
}
</select>
{errors.copModel && touched.copModel && errors.copModel}
<select
name="copBending"
onChange={handleChange}
onBlur={handleBlur}
value={values.copBending}
>
{values.copModel &&
<>{
Constants.COP_BENDING_VAL.map((item, index) => {
if (item === Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C1]) {
if (values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_B] || values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_P] || values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_V])
return <option key={index} value={item}>{Constants.COP_BENDING_VAL[index]} </option>
} else if (item === Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C2]) {
if (values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_D])
return <option key={index} value={item}>{Constants.COP_BENDING_VAL[index]} </option>
} else if (item === Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C4]) {
if (values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_N] || values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_B] || values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_P])
return <option key={index} value={item}>{Constants.COP_BENDING_VAL[index]} </option>
} else if (item === Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C5]) {
if (values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_B] || values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_P])
return <option key={index} value={item}>{Constants.COP_BENDING_VAL[index]} </option>
} else if (item === Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C6]) {
if (values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_A])
return <option key={index} value={item}>{Constants.COP_BENDING_VAL[index]} </option>
} else if (item === Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C7]) {
if (values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_A])
return <option key={index} value={item}>{Constants.COP_BENDING_VAL[index]} </option>
} else if (item === Constants.COP_BENDING_VAL[Constants.COP_BENDING_IDX_C9]) {
if (values.copModel === Constants.COP_MODEL_VAL[Constants.COP_MODEL_IDX_Y])
return <option key={index} value={item}>{Constants.COP_BENDING_VAL[index]} </option>
}
})}
</>
}
</select>
{errors.copBending && touched.copBending && errors.copBending}
</form>
)}
</Formik >
<select
size="sm"
name="workLang"
onChange={(e) => { setWorkLang(e.target.value) }}
>
<option value={Constants.TR}>{Constants.WORKING_LANG_TITLE[workLang][Constants.TR]}</option>
<option value={Constants.EN}>{Constants.WORKING_LANG_TITLE[workLang][Constants.EN]}</option>
<option value={Constants.FR}>{Constants.WORKING_LANG_TITLE[workLang][Constants.FR]}</option>
<option value={Constants.DE}>{Constants.WORKING_LANG_TITLE[workLang][Constants.DE]}</option>
<option value={Constants.RU}>{Constants.WORKING_LANG_TITLE[workLang][Constants.RU]}</option>
<option value={Constants.ES}>{Constants.WORKING_LANG_TITLE[workLang][Constants.ES]}</option>
</select>
</>
)
}
export default FormikForm;