ഈ ലേഖനം സർവേജെഎസ് സ്പോൺസർ ചെയ്തതാണ് മിക്ക റിയാക്റ്റ് ഡെവലപ്പർമാരും ഒരിക്കലും ഉച്ചത്തിൽ ചർച്ച ചെയ്യാതെ പങ്കിടുന്ന ഒരു മാനസിക മാതൃകയുണ്ട്. ആ രൂപങ്ങൾ എല്ലായ്പ്പോഴും ഘടകങ്ങളായിരിക്കണം. ഇതുപോലുള്ള ഒരു ശേഖരം എന്നാണ് ഇതിനർത്ഥം:
പ്രാദേശിക സംസ്ഥാനത്തിനായുള്ള റിയാക്റ്റ് ഹുക്ക് ഫോം (കുറഞ്ഞ റീ-റെൻഡറുകൾ, എർഗണോമിക് ഫീൽഡ് രജിസ്ട്രേഷൻ, നിർബന്ധിത ഇടപെടൽ). മൂല്യനിർണ്ണയത്തിനുള്ള സോഡ് (ഇൻപുട്ട് കൃത്യത, അതിർത്തി മൂല്യനിർണ്ണയം, ടൈപ്പ്-സേഫ് പാഴ്സിംഗ്). ബാക്കെൻഡിനായുള്ള പ്രതികരണ ചോദ്യം: സമർപ്പിക്കൽ, വീണ്ടും ശ്രമിക്കൽ, കാഷെ ചെയ്യൽ, സെർവർ സമന്വയം തുടങ്ങിയവ.
കൂടാതെ ബഹുഭൂരിപക്ഷം ഫോമുകൾക്കും - നിങ്ങളുടെ ലോഗിൻ സ്ക്രീനുകൾ, നിങ്ങളുടെ ക്രമീകരണ പേജുകൾ, നിങ്ങളുടെ CRUD മോഡലുകൾ - ഇത് വളരെ നന്നായി പ്രവർത്തിക്കുന്നു. ഓരോ ഭാഗവും അതിൻ്റെ ജോലി ചെയ്യുന്നു, അവ വൃത്തിയായി രചിക്കുന്നു, നിങ്ങളുടെ ഉൽപ്പന്നത്തെ യഥാർത്ഥത്തിൽ വ്യത്യസ്തമാക്കുന്ന നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ ഭാഗങ്ങളിലേക്ക് നിങ്ങൾക്ക് പോകാം. എന്നാൽ ഇടയ്ക്കിടെ, ഒരു ഫോം മുമ്പത്തെ ഉത്തരങ്ങളെ ആശ്രയിച്ചിരിക്കുന്ന ദൃശ്യപരത നിയമങ്ങൾ അല്ലെങ്കിൽ മൂന്ന് ഫീൽഡുകളിലൂടെ കാസ്കേഡ് ചെയ്യുന്ന മൂല്യങ്ങൾ പോലുള്ള കാര്യങ്ങൾ ശേഖരിക്കാൻ തുടങ്ങുന്നു. ഒരുപക്ഷേ മുഴുവൻ പേജുകളും ഒഴിവാക്കുകയോ അല്ലെങ്കിൽ പ്രവർത്തിക്കുന്ന മൊത്തത്തെ അടിസ്ഥാനമാക്കി കാണിക്കുകയോ ചെയ്യാം. ഒരു യൂസ്വാച്ചും ഇൻലൈൻ ബ്രാഞ്ചും ഉപയോഗിച്ച് നിങ്ങൾ ആദ്യ സോപാധികം കൈകാര്യം ചെയ്യുന്നു, അത് നല്ലതാണ്. പിന്നെ മറ്റൊന്ന്. നിങ്ങളുടെ Zod സ്കീമയ്ക്ക് സാധാരണ രീതിയിൽ പ്രകടിപ്പിക്കാൻ കഴിയാത്ത ക്രോസ്-ഫീൽഡ് നിയമങ്ങൾ എൻകോഡ് ചെയ്യാൻ നിങ്ങൾ സൂപ്പർ റിഫൈനിലേക്ക് എത്തുകയാണ്. തുടർന്ന്, സ്റ്റെപ്പ് നാവിഗേഷൻ ബിസിനസ്സ് ലോജിക് ചോർത്താൻ തുടങ്ങുന്നു. ചില ഘട്ടങ്ങളിൽ, നിങ്ങൾ എന്താണ് നിർമ്മിച്ചതെന്ന് നോക്കുകയും ഫോം യഥാർത്ഥത്തിൽ UI അല്ലെന്ന് മനസ്സിലാക്കുകയും ചെയ്യുന്നു. ഇത് കൂടുതൽ തീരുമാന പ്രക്രിയയാണ്, നിങ്ങൾ അത് സംഭരിക്കാൻ ഇടയായത് ഘടക ട്രീയാണ്. ഇവിടെയാണ് റിയാക്ടിലെ ഫോമുകളുടെ മാനസിക മാതൃക തകരുന്നത് എന്ന് ഞാൻ കരുതുന്നു, ഇത് ശരിക്കും ആരുടേയും തെറ്റല്ല. RHF + Zod സ്റ്റാക്ക് രൂപകൽപ്പന ചെയ്തതിൽ മികച്ചതാണ്. പ്രശ്നമായത്, അതിൻ്റെ അമൂർത്തങ്ങൾ പ്രശ്നവുമായി പൊരുത്തപ്പെടുന്ന ഘട്ടം മറികടന്ന് ഞങ്ങൾ അത് ഉപയോഗിക്കുന്നത് തുടരുന്നു എന്നതാണ്, കാരണം ബദലിന് ഫോമുകളെക്കുറിച്ചുള്ള വ്യത്യസ്തമായ ചിന്താഗതി ആവശ്യമാണ്. ഈ ലേഖനം ആ ബദലിനെക്കുറിച്ചാണ്. ഇത് കാണിക്കാൻ, ഞങ്ങൾ ഒരേ മൾട്ടി-സ്റ്റെപ്പ് ഫോം രണ്ടുതവണ നിർമ്മിക്കും:
റിയാക്റ്റ് ഹുക്ക് ഫോം + സോഡ് ഉപയോഗിച്ച്, സമർപ്പണത്തിനുള്ള അന്വേഷണത്തോട് പ്രതികരിക്കാൻ, ഒരു ഘടക ട്രീ എന്നതിലുപരി ഒരു ലളിതമായ JSON സ്കീമ - ഒരു ഫോം ഡാറ്റയായി പരിഗണിക്കുന്ന SurveyJS ഉപയോഗിച്ച്.
ഒരേ ആവശ്യകതകൾ, അതേ സോപാധിക യുക്തി, അവസാനം ഒരേ API കോൾ. തുടർന്ന്, എന്താണ് നീങ്ങിയതെന്നും എന്താണ് നിലനിൽക്കുന്നതെന്നും ഞങ്ങൾ കൃത്യമായി മാപ്പ് ചെയ്യുകയും ഏത് മോഡൽ എപ്പോൾ ഉപയോഗിക്കണമെന്നും തീരുമാനിക്കാനുള്ള പ്രായോഗിക മാർഗം തയ്യാറാക്കുകയും ചെയ്യും. ഞങ്ങൾ നിർമ്മിക്കുന്ന ഫോം:
ഈ ഫോം 4-ഘട്ട ഫ്ലോ ഉപയോഗിക്കും: ഘട്ടം 1: വിശദാംശങ്ങൾ
ആദ്യ നാമം (ആവശ്യമാണ്), ഇമെയിൽ (ആവശ്യമാണ്, സാധുവായ ഫോർമാറ്റ്).
ഘട്ടം 2: ഓർഡർ ചെയ്യുക
യൂണിറ്റ് വില, അളവ്, നികുതി നിരക്ക്, ഉരുത്തിരിഞ്ഞത്: ഉപമൊത്തം, നികുതി, ആകെ.
ഘട്ടം 3: അക്കൗണ്ടും ഫീഡ്ബാക്കും
നിങ്ങൾക്ക് ഒരു അക്കൗണ്ട് ഉണ്ടോ? (അതെ/ഇല്ല) അതെ എങ്കിൽ → ഉപയോക്തൃനാമം + പാസ്വേഡ്, രണ്ടും ആവശ്യമാണ്. ഇല്ലെങ്കിൽ → ഇമെയിൽ ഇതിനകം ഘട്ടം 1-ൽ ശേഖരിച്ചിട്ടുണ്ട്.
സംതൃപ്തി റേറ്റിംഗ് (1–5) ≥ 4 → ചോദിച്ചാൽ "നിങ്ങൾക്ക് എന്താണ് ഇഷ്ടപ്പെട്ടത്?" ≤ 2 → ചോദിക്കുകയാണെങ്കിൽ, "നമുക്ക് എന്ത് മെച്ചപ്പെടുത്താൻ കഴിയും?"
ഘട്ടം 4: അവലോകനം
ആകെ >= 100 ആണെങ്കിൽ മാത്രം ദൃശ്യമാകും അന്തിമ സമർപ്പണം.
ഇത് അതിരുകടന്നതല്ല. എന്നാൽ വാസ്തുശാസ്ത്രപരമായ വ്യത്യാസങ്ങൾ തുറന്നുകാട്ടാൻ ഇത് മതിയാകും. ഭാഗം 1: ഘടകം-ഡ്രൈവൻ (റിയാക്റ്റ് ഹുക്ക് ഫോം + സോഡ്) ഇൻസ്റ്റലേഷൻ npm ഇൻസ്റ്റാൾ react-hook-form zod @hookform/resolvers @tanstack/react-query
സോഡ് സ്കീമ നമുക്ക് Zod സ്കീമയിൽ നിന്ന് ആരംഭിക്കാം, കാരണം അവിടെയാണ് സാധാരണയായി ഫോമിൻ്റെ ആകൃതി സ്ഥാപിക്കുന്നത്. ആദ്യ രണ്ട് ഘട്ടങ്ങൾക്ക് - വ്യക്തിഗത വിശദാംശങ്ങളും ഓർഡർ ഇൻപുട്ടുകളും - എല്ലാം ലളിതമാണ്: ആവശ്യമായ സ്ട്രിംഗുകൾ, മിനിമം ഉള്ള നമ്പറുകൾ, ഒരു enum. നിങ്ങൾ സോപാധിക നിയമങ്ങൾ പ്രകടിപ്പിക്കാൻ ശ്രമിക്കുമ്പോൾ രസകരമായ ഭാഗം ആരംഭിക്കുന്നു.
"zod" ൽ നിന്ന് {z } ഇറക്കുമതി ചെയ്യുക;
കയറ്റുമതി const formSchema = z.object({ firstName: z.string().min(1, "ആവശ്യമാണ്"), ഇമെയിൽ: z.string().email("അസാധുവായ ഇമെയിൽ"), വില: z.number().min(0), അളവ്: z.number().min(1), നികുതിനിരക്ക്: z.ncumber(1), z.enum(["അതെ", "ഇല്ല"]), ഉപയോക്തൃനാമം: z.string().ഓപ്ഷണൽ(), പാസ്വേഡ്: z.string().ഓപ്ഷണൽ(), സംതൃപ്തി: z.number().min(1).max(5), പോസിറ്റീവ് ഫീഡ്ബാക്ക്: z.string().supptional(), improvementalFeedback. ctx) => {if (data.hasAccount === "yes") {if (!data.username) {ctx.addIssue({code: "custom", path: ["username"], സന്ദേശം: "ആവശ്യമാണ്" }); {!data.password. "ഇഷ്ടാനുസൃതം", പാത: ["പാസ്വേഡ്"], സന്ദേശം: "മിനിമം 6 പ്രതീകങ്ങൾ" });
എങ്കിൽ (data.satisfaction >= 4 && !data.positiveFeedback) { ctx.addIssue({ കോഡ്: "ഇഷ്ടാനുസൃതം", പാത: ["പോസിറ്റീവ് ഫീഡ്ബാക്ക്"], സന്ദേശം: "നിങ്ങൾക്ക് ഇഷ്ടപ്പെട്ടത് പങ്കിടുക" }); }
എങ്കിൽ (data.satisfaction <= 2 && !data.improvementFeedback) { ctx.addIssue({ code: "custom", path:["മെച്ചപ്പെടുത്തൽ ഫീഡ്ബാക്ക്"], സന്ദേശം: "എന്താണ് മെച്ചപ്പെടുത്തേണ്ടതെന്ന് ദയവായി ഞങ്ങളോട് പറയുക" }); }});
കയറ്റുമതി തരം FormData = z.infer
സോഡിൻ്റെ ടൈപ്പ്-ലെവൽ സ്കീമ വസ്തുവിൻ്റെ ആകൃതിയെ വിവരിക്കുന്നതിനാൽ, ഫീൽഡുകൾ പ്രാധാന്യമുള്ളപ്പോൾ നിയന്ത്രിക്കുന്ന നിയമങ്ങളല്ല, ഉപയോക്തൃനാമവും പാസ്വേഡും സോപാധികമായി ആവശ്യമാണെങ്കിലും ഓപ്ഷണൽ() ആയി ടൈപ്പ് ചെയ്തിരിക്കുന്നത് ശ്രദ്ധിക്കുക. സോപാധികമായ ആവശ്യകത സൂപ്പർ റിഫൈനിനുള്ളിൽ ജീവിക്കണം, അത് ആകാരം സാധൂകരിച്ചതിന് ശേഷം പ്രവർത്തിക്കുകയും പൂർണ്ണ ഒബ്ജക്റ്റിലേക്ക് ആക്സസ് ഉണ്ടായിരിക്കുകയും ചെയ്യുന്നു. ആ വേർപാട് ഒരു ന്യൂനതയല്ല; ടൂൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് ഇതാണ്: സ്കീമ ഘടനയിൽ തന്നെ പ്രകടിപ്പിക്കാൻ കഴിയാത്തപ്പോൾ ക്രോസ്-ഫീൽഡ് ലോജിക് പോകുന്നിടത്താണ് സൂപ്പർ റിഫൈൻ. ഈ സ്കീമ പ്രകടിപ്പിക്കാത്തതും ഇവിടെ ശ്രദ്ധേയമാണ്. ഇതിന് പേജുകളെക്കുറിച്ചുള്ള സങ്കൽപ്പമില്ല, ഏത് ഘട്ടത്തിൽ ഏത് ഫീൽഡുകൾ ദൃശ്യമാകും, നാവിഗേഷൻ എന്ന ആശയവുമില്ല. അതെല്ലാം മറ്റെവിടെയെങ്കിലും ജീവിക്കും. ഫോം ഘടകം
"react-hook-form"-ൽ നിന്ന് {useForm, useWatch} ഇറക്കുമതി ചെയ്യുക;"@hookform/resolvers/zod" എന്നതിൽ നിന്ന് {zodResolver} ഇറക്കുമതി ചെയ്യുക;
const STEPS = ["വിശദാംശങ്ങൾ", "ഓർഡർ", "അക്കൗണ്ട്", "അവലോകനം"];
OrderPayload എന്ന് ടൈപ്പ് ചെയ്യുക = FormData & {ഉപമൊത്തം: നമ്പർ; നികുതി: നമ്പർ; ആകെ: നമ്പർ};
എക്സ്പോർട്ട് ഫംഗ്ഷൻ RHFMultiStepForm() {const [step, setStep] = useState(0);
കോൺസ്റ്റ് മ്യൂട്ടേഷൻ = യൂസ് മ്യൂട്ടേഷൻ({ mutationFn: async (പേലോഡ്: OrderPayload) => { const res = കാത്തിരിക്കുക ("/api/orders", { രീതി: "POST", തലക്കെട്ടുകൾ: { "ഉള്ളടക്ക-തരം": "application/json" }, ബോഡി: JSON.stringify(payload), }); എങ്കിൽ (!res.ok) പുതിയ പിശക് ("സമർപ്പിക്കാൻ പരാജയപ്പെട്ടു"); റിട്ടേൺ res.json(); }, });
const {രജിസ്റ്റർ, നിയന്ത്രണം, ഹാൻഡിൽ സമർപ്പിക്കുക, ഫോംസ്റ്റേറ്റ്: {പിശകുകൾ }, } = useForm
(
);}Pen SurveyJS-03-RHF [ഫോർക്ക്ഡ്] ആറാം വംശനാശം കാണുക. ഇവിടെ വളരെയധികം കാര്യങ്ങൾ നടക്കുന്നുണ്ട്, കാര്യങ്ങൾ എവിടെയാണ് അവസാനിച്ചതെന്ന് ശ്രദ്ധിക്കുന്നത് മന്ദഗതിയിലാക്കേണ്ടതാണ്.
ഉരുത്തിരിഞ്ഞ മൂല്യങ്ങൾ - ഉപമൊത്തം, നികുതി, ആകെ - തത്സമയ ഫീൽഡ് മൂല്യങ്ങളെ ആശ്രയിക്കുന്നതിനാലും അവയ്ക്ക് മറ്റ് സ്വാഭാവിക സ്ഥലങ്ങളില്ലാത്തതിനാലും യൂസ്വാച്ച്, യൂസ്മെമോ എന്നിവ വഴി ഘടകത്തിൽ കണക്കാക്കുന്നു. ഉപയോക്തൃനാമം, പാസ്വേഡ്, പോസിറ്റീവ് ഫീഡ്ബാക്ക്, മെച്ചപ്പെടുത്തൽ ഫീഡ്ബാക്ക് എന്നിവയ്ക്കായുള്ള ദൃശ്യപരത നിയമങ്ങൾ ഇൻലൈൻ സോപാധികമായി JSX-ൽ തത്സമയം. സ്റ്റെപ്പ്-സ്കിപ്പിംഗ് ലോജിക് — ആകെ >= 100 ആകുമ്പോൾ മാത്രം ദൃശ്യമാകുന്ന അവലോകന പേജ് — showSubmit വേരിയബിളിലേക്കും സ്റ്റെപ്പ് 3 ലെ റെൻഡർ വ്യവസ്ഥയിലേക്കും ഉൾച്ചേർത്തിരിക്കുന്നു. നാവിഗേഷൻ തന്നെ ഞങ്ങൾ സ്വമേധയാ വർദ്ധിപ്പിക്കുന്ന ഒരു യൂസ് സ്റ്റേറ്റ് കൗണ്ടർ മാത്രമാണ്. റിയാക്റ്റ് ക്വറി വീണ്ടും ശ്രമങ്ങൾ, കാഷെ ചെയ്യൽ, അസാധുവാക്കൽ എന്നിവ കൈകാര്യം ചെയ്യുന്നു. സാധൂകരിച്ച ഡാറ്റ ഉപയോഗിച്ച് ഫോം mutation.mutate എന്ന് വിളിക്കുന്നു.
ഇതൊന്നും തെറ്റല്ല. ഇത് ഇപ്പോഴും ഐഡിയമാറ്റിക് റിയാക്ടാണ്, കൂടാതെ RHF ഐസൊലേറ്റുകൾ എങ്ങനെ റീ-റെൻഡർ ചെയ്യുന്നു എന്നതിന് നന്ദി. എന്നാൽ നിങ്ങൾ ഇത് എഴുതാത്ത ആരെയെങ്കിലും ഏൽപ്പിക്കുകയും അവലോകന പേജ് ഏത് സാഹചര്യത്തിലാണ് ദൃശ്യമാകുന്നത് എന്ന് വിശദീകരിക്കാൻ ആവശ്യപ്പെടുകയാണെങ്കിൽ, ഒരു വരിയിൽ പ്രസ്താവിക്കാവുന്ന ഒരു നിയമം പുനർനിർമ്മിക്കുന്നതിന്, അവർ showSubmit, റെൻഡർ കൺഡിഷൻ 3, nav ബട്ടൺ ലോജിക് - മൂന്ന് വ്യത്യസ്ത സ്ഥലങ്ങൾ എന്നിവയിലൂടെ കണ്ടെത്തേണ്ടതുണ്ട്. ഫോം പ്രവർത്തിക്കുന്നു, അതെ, എന്നാൽ ഒരു സിസ്റ്റം എന്ന നിലയിൽ പെരുമാറ്റം ശരിക്കും പരിശോധിക്കാവുന്നതല്ല. അത് മാനസികമായി നടപ്പിലാക്കണം. അതിലും പ്രധാനമായി, അത് മാറ്റുന്നതിന് എഞ്ചിനീയറിംഗ് പങ്കാളിത്തം ആവശ്യമാണ്. റിവ്യൂ സ്റ്റെപ്പ് കാണിക്കുമ്പോൾ ക്രമീകരിക്കുന്നത് പോലെയുള്ള ചെറിയ മാറ്റങ്ങൾ പോലും അർത്ഥമാക്കുന്നത് ഘടകം എഡിറ്റ് ചെയ്യുക, മൂല്യനിർണ്ണയം അപ്ഡേറ്റ് ചെയ്യുക, പുൾ അഭ്യർത്ഥന തുറക്കുക, അവലോകനത്തിനായി കാത്തിരിക്കുക, വീണ്ടും വിന്യസിക്കുക. ഭാഗം 2: സ്കീമ-ഡ്രൈവൻ (സർവേജെഎസ്) ഇപ്പോൾ നമുക്ക് ഒരു സ്കീമ ഉപയോഗിച്ച് അതേ ഫ്ലോ നിർമ്മിക്കാം. ഇൻസ്റ്റലേഷൻ npm ഇൻസ്റ്റാൾ സർവേ-കോർ സർവേ-റിയാക്റ്റ്-യുഐ @tanstack/react-query
SurveyJS-ൻ്റെ ഫോം റെൻഡറിംഗിനെ ശക്തിപ്പെടുത്തുന്ന MIT-ലൈസൻസുള്ള പ്ലാറ്റ്ഫോം-സ്വതന്ത്ര റൺടൈം എഞ്ചിൻ - ഞങ്ങൾ ഇവിടെ ശ്രദ്ധിക്കുന്ന ഭാഗം. ഇതിന് ഒരു JSON സ്കീമ ആവശ്യമാണ്, അതിൽ നിന്ന് ഒരു ആന്തരിക മോഡൽ നിർമ്മിക്കുന്നു, കൂടാതെ നിങ്ങളുടെ റിയാക്റ്റ് ഘടകത്തിൽ നിലനിൽക്കുന്ന എല്ലാ കാര്യങ്ങളും കൈകാര്യം ചെയ്യുന്നു: ദൃശ്യപരത എക്സ്പ്രഷനുകൾ വിലയിരുത്തൽ, ഡെറിവേഡ് മൂല്യങ്ങൾ കണക്കാക്കൽ, പേജിൻ്റെ അവസ്ഥ നിയന്ത്രിക്കൽ, മൂല്യനിർണ്ണയം ട്രാക്കുചെയ്യൽ, കൂടാതെ യഥാർത്ഥത്തിൽ കാണിച്ചിരിക്കുന്ന പേജുകൾ നൽകിയ "പൂർണ്ണമായത്" എന്താണ് എന്ന് തീരുമാനിക്കൽ. സർവേ-റിയാക്റ്റ്-യുഐ ആ മോഡലിനെ റിയാക്ടുമായി ബന്ധിപ്പിക്കുന്ന യുഐ / റെൻഡറിംഗ് ലെയർ. ഇത് പ്രധാനമായും ഒരു <സർവേ മോഡൽ={മോഡൽ} /> ഘടകമാണ്, അത് എഞ്ചിൻ്റെ അവസ്ഥ മാറുമ്പോഴെല്ലാം വീണ്ടും റെൻഡർ ചെയ്യുന്നു. SurveyJS UI ലൈബ്രറികൾ Angular, Vue3, കൂടാതെ മറ്റ് പല ചട്ടക്കൂടുകൾക്കും ലഭ്യമാണ്.
ഒരുമിച്ച്, ഒരു നിയന്ത്രണ ഫ്ലോയുടെ ഒരു വരി പോലും എഴുതാതെ തന്നെ അവർ നിങ്ങൾക്ക് പൂർണ്ണമായും പ്രവർത്തനക്ഷമവും മൾട്ടി-പേജ് ഫോം റൺടൈം നൽകുന്നു. സ്കീമ ഫോർമാറ്റ് തന്നെ, മുമ്പ് പറഞ്ഞതുപോലെ, ഒരു JSON മാത്രമാണ് - DSL അല്ലെങ്കിൽ ഉടമസ്ഥാവകാശം ഒന്നുമില്ല. നിങ്ങൾക്ക് ഇത് ഇൻലൈൻ ചെയ്യാം, ഒരു ഫയലിൽ നിന്ന് ഇമ്പോർട്ടുചെയ്യാം, ഒരു API-ൽ നിന്ന് എടുക്കാം, അല്ലെങ്കിൽ ഒരു ഡാറ്റാബേസ് കോളത്തിൽ സംഭരിച്ച് റൺടൈമിൽ ഹൈഡ്രേറ്റ് ചെയ്യാം. അതേ ഫോം, ഡാറ്റ പോലെ ഇവിടെ അതേ ഫോം ഉണ്ട്, ഇത്തവണ ഒരു JSON ഒബ്ജക്റ്റായി പ്രകടിപ്പിക്കുന്നു. സ്കീമ എല്ലാം നിർവചിക്കുന്നു: ഘടന, മൂല്യനിർണ്ണയം, ദൃശ്യപരത നിയമങ്ങൾ, ഉരുത്തിരിഞ്ഞ കണക്കുകൂട്ടലുകൾ, പേജ് നാവിഗേഷൻ - കൂടാതെ റൺടൈമിൽ അത് വിലയിരുത്തുന്ന ഒരു മോഡലിന് കൈമാറുന്നു. ഇത് പൂർണ്ണമായി എങ്ങനെ കാണപ്പെടുന്നുവെന്നത് ഇതാ:
കയറ്റുമതി കോൺസ്റ്റ് സർവേ സ്കീമ = {ശീർഷകം: "ഓർഡർ ഫ്ലോ", ഷോപ്രോഗ്രസ്ബാർ: "ടോപ്പ്", പേജുകൾ: [ {പേര്: "വിശദാംശങ്ങൾ", ഘടകങ്ങൾ: [ {തരം: "ടെക്സ്റ്റ്", പേര്: "firstName", isRequired: true }, { type: "text", name: "email", inputType:"Required ടൈപ്പ്: "ഇമെയിൽ", വാചകം: "അസാധുവായ ഇമെയിൽ" }] } ] }, {പേര്: "ഓർഡർ", ഘടകങ്ങൾ: [ {തരം: "വാചകം", പേര്: "വില", ഇൻപുട്ട് ടൈപ്പ്: "നമ്പർ", സ്ഥിര മൂല്യം: 0 }, {തരം: "ടെക്സ്റ്റ്", പേര്: "അളവ്", ഇൻപുട്ട് ടൈപ്പ്, 1 തരം: "നമ്പർ" "ഡ്രോപ്പ്ഡൗൺ",പേര്: "taxRate", defaultValue: 0.1, ചോയ്സുകൾ: [ {മൂല്യം: 0.05, ടെക്സ്റ്റ്: "5%" }, {മൂല്യം: 0.1, ടെക്സ്റ്റ്: "10%" }, {മൂല്യം: 0.15, ടെക്സ്റ്റ്: "15%" } ] }, {type: "expression", tal name: "subto }, { തരം: "എക്സ്പ്രഷൻ", പേര്: "നികുതി", എക്സ്പ്രഷൻ: "{സബ്ടോട്ടൽ} {ടാക്സ് റേറ്റ്}" }, {തരം: "എക്സ്പ്രഷൻ", പേര്: "മൊത്തം", എക്സ്പ്രഷൻ: "{ഉപമൊത്തം} + {നികുതി}" } ] }, { പേര്: "അക്കൗണ്ട്", ഘടകങ്ങൾ: [ {തരം, പേര്, "വൈ" ചോയ്സ്: "റേഡിയോ ഗ്രൂപ്പ്" ചോയ്സ്: "ഇല്ല"] }, {തരം: "ടെക്സ്റ്റ്", പേര്: "ഉപയോക്തൃനാമം", ദൃശ്യമാണെങ്കിൽ: "{hasAccount} = 'അതെ'", ആവശ്യമാണ്: ശരി }, {തരം: "ടെക്സ്റ്റ്", പേര്: "പാസ്വേഡ്", ഇൻപുട്ട് തരം: "പാസ്വേഡ്", ദൃശ്യമാണെങ്കിൽ: "{hasAccount}} = 'ആവശ്യമുള്ളത്' കുറഞ്ഞ ദൈർഘ്യം: 6, ടെക്സ്റ്റ്: "കുറഞ്ഞത് 6 പ്രതീകങ്ങൾ" }] }, {തരം: "റേറ്റിംഗ്", പേര്: "സംതൃപ്തി", നിരക്ക്മിൻ: 1, നിരക്ക്മാക്സ്: 5 }, {തരം: "അഭിപ്രായം", പേര്: "പോസിറ്റീവ് ഫീഡ്ബാക്ക്", ദൃശ്യമായാൽ: "{സംതൃപ്തി}, >" തരം പേര്: " "improvementFeedback", ദൃശ്യമായാൽ: "{സംതൃപ്തി} <= 2" } ] }, {name: "review", visualIf: "{total} >= 100", ഘടകങ്ങൾ: [] } ]};
ഇത് ഒരു നിമിഷത്തേക്ക് RHF പതിപ്പുമായി താരതമ്യം ചെയ്യുക.
ഉപയോക്തൃനാമവും പാസ്വേഡും സോപാധികമായി ആവശ്യമുള്ള സൂപ്പർറെഫൈൻ ബ്ലോക്ക് ഇല്ലാതായി. ദൃശ്യമാണെങ്കിൽ: "{hasAccount} = 'അതെ'" എന്നതുമായി സംയോജിപ്പിച്ച് isRequired: നിങ്ങൾ അവ കണ്ടെത്തുമെന്ന് പ്രതീക്ഷിക്കുന്ന ഫീൽഡിൽ തന്നെ രണ്ട് ആശങ്കകളും ഒരുമിച്ച് കൈകാര്യം ചെയ്യുന്നു. സബ്ടൊട്ടൽ, ടാക്സ്, ടോട്ടൽ എന്നിവ കണക്കാക്കിയ യൂസ്വാച്ച് + യൂസ്മെമോ ചെയിൻ, പേര് ഉപയോഗിച്ച് പരസ്പരം പരാമർശിക്കുന്ന മൂന്ന് എക്സ്പ്രഷൻ ഫീൽഡുകൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കുന്നു. സ്റ്റെപ്പ് 3 റെൻഡർ ബ്രാഞ്ചായ showSubmit വഴി ട്രെയ്സ് ചെയ്യുന്നതിലൂടെ മാത്രം RHF പതിപ്പിൽ പുനർനിർമ്മിക്കാവുന്ന അവലോകന പേജ് അവസ്ഥ. അവസാനമായി, പേജ് ഒബ്ജക്റ്റിലെ പ്രോപ്പർട്ടിയാണെങ്കിൽ നാവ് ബട്ടൺ ലോജിക് ഒരൊറ്റ ദൃശ്യമാണ്.
അവിടെയും അതേ യുക്തി തന്നെ. ഘടകത്തിലുടനീളം വ്യാപിക്കുന്നതിനുപകരം, ഒറ്റപ്പെട്ട നിലയിൽ ദൃശ്യമാകുന്നിടത്ത് സ്കീമ അതിന് ഒരു സ്ഥലം നൽകുന്നു എന്ന് മാത്രം. കൂടാതെ, സ്കീമ തരം ഉപയോഗിക്കുന്നത് ശ്രദ്ധിക്കുക: സബ്ടോട്ടൽ, ടാക്സ്, ടോട്ടൽ എന്നിവയ്ക്ക് 'എക്സ്പ്രഷൻ'. എക്സ്പ്രഷൻ വായിക്കാൻ മാത്രമുള്ളതാണ് കൂടാതെ കണക്കാക്കിയ മൂല്യങ്ങൾ പ്രദർശിപ്പിക്കുന്നതിന് പ്രധാനമായും ഉപയോഗിക്കുന്നു. സർവേജെഎസ് തരം പിന്തുണയ്ക്കുന്നു: സ്റ്റാറ്റിക് ഉള്ളടക്കത്തിന് 'html', എന്നാൽ കണക്കാക്കിയ മൂല്യങ്ങൾക്ക്, എക്സ്പ്രഷൻ ശരിയായ ചോയിസ് ആണ്. ഇപ്പോൾ പ്രതികരണ വശത്തേക്ക്. റെൻഡറിംഗും സമർപ്പണവും വളരെ ലളിതം. നിങ്ങളുടെ API-യിലേക്ക് അതേ രീതിയിൽ വയർ ഓൺകംപ്ലീറ്റ് ചെയ്യുക - യൂസ്മ്യൂട്ടേഷൻ അല്ലെങ്കിൽ പ്ലെയിൻ ഫെച്ച് വഴി:
"react"-ൽ നിന്ന് {useState, useEffect, useRef} ഇറക്കുമതി ചെയ്യുക; "@tanstack/react-query" എന്നതിൽ നിന്ന് {useMutation} ഇറക്കുമതി ചെയ്യുക; "survey-core"-ൽ നിന്ന് { മോഡൽ } ഇറക്കുമതി ചെയ്യുക;
എക്സ്പോർട്ട് ഫംഗ്ഷൻ SurveyForm() {const [model] = useState(() => new Model(surveySchema));
കോൺസ്റ്റ് മ്യൂട്ടേഷൻ = യൂസ് മ്യൂട്ടേഷൻ({ mutationFn: async (data) => { const res = കാത്തിരിക്കുക ("/api/orders", { രീതി: "POST", തലക്കെട്ടുകൾ: { "ഉള്ളടക്ക-തരം": "application/json" }, ബോഡി: JSON.stringify(data), }); എങ്കിൽ (!res.ok) പുതിയ പിശക് ("സമർപ്പിക്കാൻ പരാജയപ്പെട്ടു"); റിട്ടേൺ res.json(); }, });
const mutationRef = useRef(mutation); mutationRef.current = മ്യൂട്ടേഷൻ; useEffect(() => {const handler = (sender) => mutationRef.current.mutate(sender.data); model.onComplete.add(handler); മടങ്ങുക () => model.onComplete.remove(handler);}, [model]); // റെഫർ ഓരോ റെൻഡറും ഹാൻഡ്ലർ വീണ്ടും രജിസ്റ്റർ ചെയ്യുന്നത് ഒഴിവാക്കുന്നു (മ്യൂട്ടേഷൻ ഒബ്ജക്റ്റ് ഐഡൻ്റിറ്റി മാറ്റങ്ങൾ)
മടങ്ങുക ( <> <സർവേ മോഡൽ={model} /> {mutation.isError &&
Pen SurveyJS-03-SurveyJS [ഫോർക്ക്ഡ്] ആറാം വംശനാശം കാണുക.
ഉപയോക്താവ് അവസാനമായി ദൃശ്യമാകുന്ന പേജിൻ്റെ അവസാനത്തിൽ എത്തുമ്പോൾ onComplete ഫയർ ചെയ്യുന്നു. അതിനാൽ മൊത്തം ഒരിക്കലും 100 കടന്നില്ലെങ്കിൽ അവലോകന പേജ് ഒഴിവാക്കിയാൽ, "അവസാന പേജ്" എന്താണ് അർത്ഥമാക്കുന്നത് എന്ന് തീരുമാനിക്കുന്നതിന് മുമ്പ് SurveyJS ദൃശ്യപരത വിലയിരുത്തുന്നതിനാൽ അത് ഇപ്പോഴും ശരിയായി പ്രവർത്തിക്കുന്നു. തുടർന്ന്, sender.data എല്ലാ ഉത്തരങ്ങളും ഫസ്റ്റ്-ക്ലാസ് ഫീൽഡുകളായി കണക്കാക്കിയ മൂല്യങ്ങൾ (ഉപമൊത്തം, നികുതി, ആകെ) ഉൾക്കൊള്ളുന്നു, അതിനാൽ API പേലോഡ് onSubmit-ൽ RHF പതിപ്പ് സ്വമേധയാ അസംബിൾ ചെയ്തതിന് സമാനമാണ്. ദിmutationRef പാറ്റേൺ എല്ലാ റെൻഡറിലും മാറുന്ന ഒരു മൂല്യത്തിൽ സ്ഥിരതയുള്ള ഇവൻ്റ് ഹാൻഡ്ലർ ആവശ്യമുള്ള എവിടെയും നിങ്ങൾ എത്തിച്ചേരുന്ന ഒന്നാണ് - അതിനെക്കുറിച്ച് SurveyJS-നിർദ്ദിഷ്ടമായ ഒന്നുമില്ല.
റിയാക്റ്റ് ഘടകത്തിൽ ഇനി ഒരു ബിസിനസ് ലോജിക്കും അടങ്ങിയിട്ടില്ല. യൂസ് വാച്ച് ഇല്ല, സോപാധികമായ JSX ഇല്ല, സ്റ്റെപ്പ് കൗണ്ടറില്ല, യൂസ്മെമോ ചെയിൻ ഇല്ല, സൂപ്പർ റിഫൈൻ ഇല്ല. റിയാക്റ്റ് യഥാർത്ഥത്തിൽ മികച്ചത് ചെയ്യുന്നു: ഒരു ഘടകം റെൻഡർ ചെയ്യുകയും അത് ഒരു API കോളിലേക്ക് വയറിംഗ് ചെയ്യുകയും ചെയ്യുന്നു. എന്താണ് പ്രതികരണത്തിൽ നിന്ന് മാറിയത്?
ആശങ്ക RHF സ്റ്റാക്ക് സർവേജെഎസ് ദൃശ്യപരത JSX ശാഖകൾ ദൃശ്യമാണെങ്കിൽ ഉരുത്തിരിഞ്ഞ മൂല്യങ്ങൾ വാച്ച് / യൂസ്മെമോ ഉപയോഗിക്കുക ആവിഷ്കാരം ക്രോസ്-ഫീൽഡ് നിയമങ്ങൾ സൂപ്പർ ശുദ്ധീകരിക്കുക സ്കീമ വ്യവസ്ഥകൾ നാവിഗേഷൻ സ്റ്റെപ്പ് സ്റ്റേറ്റ് എങ്കിൽ പേജ് ദൃശ്യമാണ് റൂൾ ലൊക്കേഷൻ ഫയലുകളിലുടനീളം വിതരണം ചെയ്തു സ്കീമയിൽ കേന്ദ്രീകൃതമാണ്
റിയാക്ടിൽ നിലനിൽക്കുന്നത് ലേഔട്ട്, സ്റ്റൈലിംഗ്, സബ്മിഷൻ വയറിംഗ്, ആപ്പ് ഇൻ്റഗ്രേഷൻ എന്നിവയാണ്, അതായത് റിയാക്റ്റ് യഥാർത്ഥത്തിൽ രൂപകൽപ്പന ചെയ്തിരിക്കുന്ന കാര്യങ്ങൾ. മറ്റെല്ലാം സ്കീമയിലേക്ക് നീങ്ങി, സ്കീമ ഒരു JSON ഒബ്ജക്റ്റ് മാത്രമായതിനാൽ, അത് ഒരു ഡാറ്റാബേസിൽ സംഭരിക്കാനും നിങ്ങളുടെ ആപ്ലിക്കേഷൻ കോഡിന് പകരം വേർഷൻ ചെയ്യാനും അല്ലെങ്കിൽ ഒരു വിന്യാസം ആവശ്യമില്ലാതെ തന്നെ ആന്തരിക ടൂളിംഗ് വഴി എഡിറ്റ് ചെയ്യാനുമാകും. അവലോകന പേജ് ട്രിഗർ ചെയ്യുന്ന ത്രെഷോൾഡ് മാറ്റേണ്ട ഒരു ഉൽപ്പന്ന മാനേജർക്ക് ഘടകം സ്പർശിക്കാതെ തന്നെ അത് ചെയ്യാൻ കഴിയും. ഫോം സ്വഭാവം പതിവായി വികസിക്കുന്നതും എല്ലായ്പ്പോഴും എഞ്ചിനീയർമാരാൽ നയിക്കപ്പെടാത്തതുമായ ടീമുകൾക്ക് ഇത് അർത്ഥവത്തായ പ്രവർത്തന വ്യത്യാസമാണ്. ഓരോ സമീപനവും എപ്പോൾ ഉപയോഗിക്കണം? എനിക്കായി പ്രവർത്തിക്കുന്ന ഒരു നല്ല നിയമമുണ്ട്: ഫോം പൂർണ്ണമായും ഇല്ലാതാക്കുന്നത് സങ്കൽപ്പിക്കുക. നിങ്ങൾക്ക് എന്ത് നഷ്ടപ്പെടും?
ഇത് സ്ക്രീനുകളാണെങ്കിൽ, നിങ്ങൾക്ക് ഘടക-പ്രേരിതമായ ഫോമുകൾ വേണം. ത്രെഷോൾഡുകൾ, ബ്രാഞ്ചിംഗ് നിയമങ്ങൾ, യഥാർത്ഥ തീരുമാനങ്ങൾ എൻകോഡ് ചെയ്യുന്ന സോപാധിക ആവശ്യകതകൾ എന്നിവ പോലുള്ള ബിസിനസ്സ് ലോജിക് ആണെങ്കിൽ, നിങ്ങൾക്ക് ഒരു സ്കീമ എഞ്ചിൻ വേണം.
അതുപോലെ, നിങ്ങളുടെ വഴിയിൽ വരുന്ന മാറ്റങ്ങൾ കൂടുതലും ലേബലുകൾ, ഫീൽഡുകൾ, ലേഔട്ട് എന്നിവയെ കുറിച്ചാണെങ്കിൽ, RHF നിങ്ങൾക്ക് മികച്ച സേവനം നൽകും. ഒരു ചൊവ്വാഴ്ച ഉച്ചതിരിഞ്ഞ് ടിക്കറ്റ് ഫയൽ ചെയ്യാതെ തന്നെ നിങ്ങളുടെ ഓപ്സിനോ ലീഗൽ ടീമോ ക്രമീകരിക്കേണ്ട വ്യവസ്ഥകൾ, ഫലങ്ങൾ, നിയമങ്ങൾ എന്നിവയെക്കുറിച്ചാണ് അവയെങ്കിൽ, SurveyJS-നൊപ്പമുള്ള സ്കീമ മോഡൽ കൂടുതൽ സത്യസന്ധമായി യോജിക്കുന്നു. ഈ രണ്ട് സമീപനങ്ങളും യഥാർത്ഥത്തിൽ പരസ്പരം മത്സരിക്കുന്നില്ല. അവ വ്യത്യസ്ത തരം പ്രശ്നങ്ങളെ അഭിസംബോധന ചെയ്യുന്നു, കൂടാതെ ഒഴിവാക്കേണ്ട തെറ്റ് യുക്തിയുടെ ഭാരവുമായി അമൂർത്തത പൊരുത്തപ്പെടുന്നില്ല എന്നതാണ് - ഒരു റൂൾ സിസ്റ്റത്തെ ഒരു ഘടകം പോലെ പരിഗണിക്കുക, കാരണം അതാണ് പരിചിതമായ ഉപകരണം, അല്ലെങ്കിൽ ഒരു ഫോം മൂന്ന് ഘട്ടങ്ങളായി വളർന്ന് ഒരു സോപാധിക ഫീൽഡ് നേടിയതിനാൽ ഒരു പോളിസി എഞ്ചിനിലേക്ക് എത്തുക. ഞങ്ങൾ ഇവിടെ നിർമ്മിച്ച ഫോം മനഃപൂർവ്വം അതിർത്തിക്കടുത്ത് ഇരിക്കുന്നു, വ്യത്യാസം തുറന്നുകാട്ടാൻ കഴിയുന്നത്ര സങ്കീർണ്ണമാണ്, എന്നാൽ താരതമ്യത്തിൽ കൃത്രിമം തോന്നുന്ന തരത്തിൽ അത്ര തീവ്രമല്ല. നിങ്ങളുടെ കോഡ്ബേസിൽ അസാമാന്യമായി മാറിയ മിക്ക യഥാർത്ഥ രൂപങ്ങളും ഒരുപക്ഷേ അതേ അതിർത്തിക്കടുത്തായിരിക്കും ഇരിക്കുക, സാധാരണഗതിയിൽ അവ യഥാർത്ഥത്തിൽ എന്താണെന്ന് ആരെങ്കിലും പേരുനൽകിയിട്ടുണ്ടോ എന്നതാണ് ചോദ്യം. എപ്പോൾ റിയാക്റ്റ് ഹുക്ക് ഫോം + സോഡ് ഉപയോഗിക്കുക:
ഫോമുകൾ CRUD-അധിഷ്ഠിതമാണ്; ലോജിക് ആഴം കുറഞ്ഞതും UI-ഡ്രിവൺ ആണ്; എഞ്ചിനീയർമാർക്ക് എല്ലാ സ്വഭാവവും സ്വന്തമാണ്; ബാക്കെൻഡ് സത്യത്തിൻ്റെ ഉറവിടമായി തുടരുന്നു.
എപ്പോൾ സർവേജെഎസ് ഉപയോഗിക്കുക:
ഫോമുകൾ ബിസിനസ് തീരുമാനങ്ങൾ എൻകോഡ് ചെയ്യുന്നു; നിയമങ്ങൾ യുഐയിൽ നിന്ന് സ്വതന്ത്രമായി വികസിക്കുന്നു; ലോജിക് ദൃശ്യമാകണം, ഓഡിറ്റ് ചെയ്യപ്പെടണം, അല്ലെങ്കിൽ പതിപ്പ് ആയിരിക്കണം; എഞ്ചിനീയർ അല്ലാത്തവർ സ്വഭാവത്തെ സ്വാധീനിക്കുന്നു; ഒരേ ഫോം ഒന്നിലധികം മുൻഭാഗങ്ങളിൽ പ്രവർത്തിക്കണം.
