Ko e fakamatala ko 'eni ko ha poupou 'e he SurveyJS . ‘Oku ‘i ai ha sipinga faka’atamai ‘oku vahevahe ‘e he tokolahi taha ‘o e kau developers ‘o e React ‘o ‘ikai ke nau teitei alea’i le’olahi ia. Ko e ngaahi fotunga ko ia 'oku totonu ma'u pe ke hoko ko e ngaahi konga. 'Oku 'uhinga 'eni ki ha stack hange ko e:
React Hook Foomu ki he pule'anga fakalotofonua (si'isi'i taha 'o e toe fakahoko, lesisita 'o e mala'e ergonomic, fetu'utaki 'oku fie ma'u). Zod ki he fakamo'oni (totonu 'o e input, fakamo'oni'i 'o e ngata'anga, fa'ahinga-malu parsing). Tali Fehu'i ki he backend: fakahu, toe feinga, caching, sync 'o e seva, mo e me'a pehe.
Pea ki he konga lahi 'o e ngaahi foomu — ho'o ngaahi screens login, ho'o ngaahi peesi settings, ho'o modals CRUD — 'oku ngaue lelei mo'oni 'eni. 'Oku fai 'e he konga takitaha 'ene ngaue, 'oku nau fa'u ma'a, pea 'e lava ke ke hoko atu ki he ngaahi konga 'o ho'o tohi kole 'oku ne fakafaikehekehe'i mo'oni ho'o koloa. Ka 'i he taimi kotoa pe, 'oku kamata ke tanaki 'e ha foomu 'a e ngaahi me'a hange ko e ngaahi tu'utu'uni 'o e visibility 'oku fakafalala ki he ngaahi tali kimu'a, pe ngaahi mahu'inga 'oku ma'u mei ai 'oku cascade 'i he ngaahi mala'e 'e tolu. Mahalo na'a mo e ngaahi peesi kakato 'oku totonu ke fakalaka pe fakahaa'i 'o makatu'unga 'i ha fakakatoa 'oku lele. 'Oku ke tokanga'i 'a e 'uluaki conditional 'aki ha useWatch mo ha va'a 'i he laine, 'a ia 'oku sai pe. Pea ko e taha. Pea ‘oku ke a’u atu ki he superRefine ke encode ‘a e ngaahi tu’utu’uni kolosi-mala’e ‘oku ‘ikai lava ke fakahaa’i ‘e ho’o Zod schema ‘i he founga angamaheni. Pea, kamata ke leaking 'a e folau 'eve'eva sitepu 'a e logic pisinisi. ‘I ha taimi, ‘oku ke vakai ki he me’a kuo ke langa pea ke ‘ilo’i ‘oku ‘ikai ke toe UI mo’oni ‘a e foomu. ‘Oku lahi ange ia ‘i ha founga tu’utu’uni, pea ko e ‘akau ‘o e konga ko e feitu’u pe ia na’e hoko ai ke ke tanaki ia. Ko e feitu’u ‘eni ‘oku ou fakakaukau ‘oku movete ai ‘a e sipinga faka’atamai ki he ngaahi foomu ‘i he React, pea ‘oku ‘ikai mo’oni ha hala ‘a ha taha. 'Oku lelei 'aupito 'a e RHF + Zod stack 'i he me'a na'e fa'u ki ai. Ko e issue ko 'etau hehema ke kei faka'aonga'i ia 'o fakalaka 'i he tu'unga 'oku fe'unga ai hono ngaahi abstractions mo e palopalema koe'uhi 'oku fie ma'u 'e he alternative ha founga kehe 'o e fakakaukau ki he ngaahi fotunga 'o faka'aufuli. Ko e kupu ko ení ‘oku fekau‘aki ia mo e founga kehe ko iá. Ke fakahaa’i ‘eni, te tau langa ‘a e foomu sitepu lahi tatau tofu pe tu’o ua:
Mo e Foomu Hook 'o e React + Zod uaea ki he Fehu'i 'o e React ki hono fakahu, 'I he SurveyJS, 'a ia 'oku ne tokanga'i ha foomu ko e fakamatala — ko ha schema JSON faingofua — kae 'ikai ko ha 'akau 'o e konga.
Ngaahi fie ma'u tatau, logic conditional tatau, ui API tatau 'i he ngata'anga. Pea te mau mape’i tonu ‘a e me’a na’e hiki mo e me’a na’e nofo, pea fokotu’u ha founga ‘aonga ke fakapapau’i pe ko e fē ‘a e sipinga ‘oku totonu ke ke ngaue’aki, pea mo e taimi. Ko e foomu ‘oku mau langa:
'E ngaue'aki 'e he foomu ko 'eni ha tafe 'o e sitepu 'e 4: Sitepu 1: Fakaikiiki
Hingoa ʻuluakí (ʻoku fie maʻu), . 'Imeili (fiema'u, fotunga 'oku 'aonga).
Sitepu 2: ʻOta
Totongi 'iuniti, Lahi, Ko e totongi tukuhau, Maʻu mei ai: Fakakātoa siʻisiʻi, Tukuhau, Fakakātoa.
Sitepu 3: 'Akauni & Fakakaukau
‘Oku ‘i ai ha‘o ‘akauni? (ʻIo/ʻIkai) Kapau 'Io → hingoa faka'aonga'i + lea fufuu, 'oku fie ma'u fakatou'osi. Kapau 'Oku 'Ikai → 'imeili kuo 'osi tanaki 'i he sitepu 1.
Fakafuofua ʻo e fiemālié (1–5) Kapau ≥ 4 → fehuʻi “Ko e hā naʻá ke saiʻia aí?” Kapau ≤ 2 → fehuʻi “Ko e hā te tau lava ʻo fakaleleiʻí?”
Sitepu 4: Toe vakaiʻi .
'Oku toki 'asi mai kapau 'oku fakakatoa >= 100 . Fakahū fakaʻosi.
‘Oku ‘ikai ke fu‘u tōtu‘a ‘eni. Ka ‘oku fe’unga pe ia ke fakahaa’i ‘a e ngaahi kehekehe faka’aati. Konga 1: Konga-fakalele (Foomu Hook tali + Zod) Fokotuʻu npm fokotu'u 'a e tali-hook-foomu zod @hookfoomu/kau fakalelei'i @tanstack/tali-fehu'i
Zod Sikima Tau kamata ‘aki ‘a e Zod schema, he ko e feitu’u ia ia ‘oku fa’a fokotu’u ai ‘a e fotunga ‘o e foomu. Ki he 'uluaki sitepu 'e ua — ngaahi fakaikiiki fakafo'ituitui mo e ngaahi inputs 'o e 'ota — 'oku hangatonu 'a e me'a kotoa pe: fie ma'u 'a e ngaahi aho, ngaahi fika mo e minimums, mo ha enum. ʻOku kamata ʻa e konga mālié ʻi he taimi ʻokú ke feinga ai ke fakahaaʻi ʻa e ngaahi tuʻutuʻuni fakakonisitūtoné.
hū mai { z } mei he "zod";
'ave ki tu'apule'anga const formSchema = z.me'a ({'uluakihingoa: z.string().min(1, "Fiema'u"), 'imeili: z.string().'imeili("'Imeili 'oku 'ikai ke 'aonga"), totongi: z.fika().miniti(0), lahi: z.fika().miniti(1), tukuhau: z.rna (), 'oku 'ikai ha 'akauni(), 'oku 'ikai ha 'akauni(), 'oku 'ikai ha'ane: z. z.afo ().fili (), lea fufuu: z.aho ().fili (), fiemalie: z.fika ().min (1).max (5), leleiFeedback: z.afo ().fili (), fakalelei'i: z.lau ().fili (),} "s). kapau (! fakamatala.hingoa faka'aonga'i) {ctx.addIssue ({kouti: "angamaheni", hala: ["hingoa faka'aonga'i"], fekau: "Fiema'u" } } kapau (! fakamatala.lea fufuu || fakamatala.lea fufuu.loloa < 6) "ctx.addIssue ({kouti:] s", ngaahi mata'itohi" }); } }
kapau (data.fiemalie >= 4 && !data.fakakaukau lelei) { ctx.addIssue ({ code: "angamaheni", hala: ["fakakaukau lelei"], fekau: "Kataki 'o vahevahe 'a e me'a na'a ke sai'ia ai" }); }
kapau (data.fiemalie <= 2 && !data.fakalelei'iFeedback) {ctx.addIssue({kouti: "angamaheni", hala:["fakalelei'iFeedback"], fekau: "Kataki 'o talamai 'a e me'a ke fakalelei'i" }); }});
fa'ahinga 'o e foomuData = z.infer
Fakatokanga’i ange ‘oku lomi’i ‘a e hingoa faka’aonga’i mo e lea fufuu ko e fili() neongo ‘oku nau fie ma’u fakakonisitutone koe’uhi ‘oku fakamatala’i ‘e he schema ‘o e levolo ‘o e fa’ahinga ‘a Zod ‘a e fotunga ‘o e me’a, ‘o ‘ikai ko e ngaahi tu’utu’uni ‘oku pule’i ‘a e taimi ‘oku mahu’inga ai ‘a e ngaahi mala’e. Ko e fie ma'u 'o e tu'unga kuo pau ke nofo 'i loto 'i he superRefine, 'a ia 'oku lele hili hono fakamo'oni'i 'o e fotunga pea 'oku 'i ai 'a e 'alunga ki he me'a kakato. Ko e mavahe ko iá ʻoku ʻikai ko ha mele; ko e me’a pe ia ‘oku fakataumu’a ki ai ‘a e me’angaue: superRefine ko e feitu’u ia ‘oku ‘alu ki ai ‘a e logic kolosi-mala’e ‘i he taimi ‘oku ‘ikai lava ke fakahaa’i ai ‘i he fokotu’utu’u ‘o e schema ‘iate ia pe. Ko e me’a foki ‘oku fakatokanga’i heni ko e me’a ‘oku ‘ikai ke fakahaa’i ‘e he schema ko ‘eni. ʻOku ʻikai haʻane fakakaukau ki he ngaahi peesí, ʻikai haʻane fakakaukau pe ko e fē ʻa e ngaahi malaʻe ʻoku ʻasi ʻi he poini fē, pea ʻikai haʻane fakakaukau ki he folau ʻeveʻevá. Ko e kotoa ‘o e me‘a ko iá ‘e mo‘ui ia ‘i ha feitu‘u kehe. Konga Foomu
'omi { faka'aonga'i 'a e Foomu, faka'aonga'i 'a eWatch } mei he "tali-hook-foomu"; 'omi { zodResolver } mei he "@ hookform/resolvers/zod"; 'omi { faka'aonga'iMutation } mei he "@ tanstack/tali-fehu'i"; 'omi { faka'aonga'i 'o eState, faka'aonga'i 'a eMemo } mei he "tali"; ma, fa'ahinga {S
const SITEPU = ["fakaikiiki", "'ota", "'akauni", "vakai'i"];
fa'ahinga 'OtaPayload = FoomuData & {fakakatoa si'isi'i: fika; tukuhau: fika; fakakatoa: fika };
ngaue 'o e 'ave ki tu'apule'anga RHFMultiSitepuFoomu () { const [sitepu, setiSitepu] = faka'aonga'i 'o eState (0);
const liliu = faka'aonga'i 'a e liliu ({ liliuFn: async (totongi: 'Ota totongi) => { const res = tatali ki he 'omi ("/ api/ngaahi tu'utu'uni", { founga: "POST", ngaahi 'ulu'i tohi: { "Kanokato-Fa'ahinga": "tohi kole/json" }, sino: JSON.fakahokohoko (kavenga totongi), }); kapau (!res.ok) lī fo'ou Hala("Na'e 'ikai lava ke fakahū atu"); fakafoki mai 'a e res.json (); }, });
const {lesisita, pule'i, to'oto'oSubmit, formState: { ngaahi fehalaaki }, } = faka'aonga'i 'a e Foomu
fakafoki (
{sitepu === 1 && ( <>
{sitepu === 2 && ( <>
{hasAccount === "'Io" && ( <>
{fiemalie >= 4 && ( )}
{fiemalie <= 2 && ( )} )}
{sitepu === 3 && fakakatoa >= 100 &&
Vakai ki he Savea ʻo e PeniJS-03-RHF [fakaʻauha] ʻe he mate ʻe ono. ‘Oku fu’u lahi ‘aupito ‘a e me’a ‘oku hoko heni, pea ‘oku taau ke fakamāmālie’i ke fakatokanga’i ‘a e feitu’u na’e iku ki ai ‘a e ngaahi me’a.
Ko e ngaahi mahu’inga ‘oku ma’u — subtotal, tukuhau, fakakatoa — ‘oku fakafuofua’i ‘i he konga ‘o fakafou ‘i he useWatch mo e useMemo koe’uhi he ‘oku nau fakafalala ki he ngaahi mahu’inga ‘o e mala’e mo’ui pea ‘oku ‘ikai ha toe feitu’u fakanatula kehe ma’anautolu. Ko e ngaahi tu'utu'uni 'o e 'asi ki he hingoa faka'aonga'i, lea fufuu, positiveFeedback, mo e fakalelei'iFeedback 'oku mo'ui 'i he JSX ko e ngaahi tu'unga 'i he laine. Ko e sitepu-skipping logic — 'oku 'asi pe 'a e peesi vakai'i 'i he taimi 'oku fakakatoa >= 100 — 'oku fakahu ia ki he showSubmit kehekehe mo e tu'unga 'o e render 'i he sitepu 3. Ko e folau ‘eve’eva ‘iate ia pe ko ha useState counter pe ‘oku tau fakalahi to’oto’o. 'Oku tokanga'i 'e he React Query 'a e toe feinga, caching, mo e ta'e'aonga. 'Oku ui pe 'e he foomu 'a e mutation.mutate mo e fakamatala kuo fakamo'oni'i.
ʻOku ʻikai ha taha ʻo e ngaahi meʻá ni ʻe hala, per se. 'Oku kei idiomatic 'eni 'a e tali, pea 'oku 'i ai 'a e konga 'oku 'ikai fu'u performant fakafeta'i ki he founga 'oku fakamavahe'i ai 'e he RHF 'a e toe fakahoko. Ka ‘o kapau te ke foaki ‘eni ki ha taha na’e ‘ikai ke ne tohi ia pea kole ange ke nau fakamatala’i ‘i he ngaahi tu’unga ‘oku ‘asi mai ai ‘a e peesi vakai’i, kuo pau ke nau muimui’i ‘o fakafou ‘i he showSubmit, ‘a e sitepu 3 render condition, pea mo e nav button logic — ngaahi feitu’u kehekehe ‘e tolu — ke toe langa hake ha tu’utu’uni na’e mei lava ke fakaha ‘i ha laine ‘e taha. ‘Oku ngaue ‘a e foomu, ‘io, ka ‘oku ‘ikai ke inspectable mo’oni ‘a e ‘ulungaanga ko ha sisitemi. Kuo pau ke fakahoko faka‘atamai ia. Ko e meʻa ʻoku mahuʻinga angé, ko hono liliú ʻoku fie maʻu ke kau mai ʻa e kau ʻenisiniá. Na'a mo ha ki'i tweak, hange ko hono fakatonutonu 'i he taimi 'oku fakahaa'i ai 'a e sitepu 'o e vakai'i, 'Oku 'uhinga ia ki hono fakatonutonu 'o e konga, fakafo'ou 'a e fakamo'oni, fakaava ha kole toho, tatali ki he vakai'i, pea toe deploying. Konga 2: Fakalele 'e he Sikema (SaveaJS) Ko ‘eni tau langa ‘a e tafe tatau ‘o ngaue’aki ha schema. Fokotuʻu npm fokotu'u 'a e savea-tefito savea-tali-ui @tanstack/tali-fehu'i
survey-coreThe MIT-laiseni 'a e tu'unga-tau'ataina 'o e taimi lele 'a e misini 'oku ne fakaivia 'a e SurveyJS 'a e foomu 'o e 'oatu — 'a e konga 'oku tau tokanga ki ai heni. 'Oku ne fie ma'u ha JSON schema, langa hake ha sipinga 'i loto mei ai, pea tokanga'i 'a e me'a kotoa pe 'e mo'ui 'i ho'o konga React: sivi'i 'a e ngaahi fakahaa'i 'o e 'asi, computing 'a e ngaahi mahu'inga 'oku ma'u mei ai, pule'i 'a e tu'unga 'o e peesi, muimui'i 'a e fakamo'oni, mo e fakapapau'i 'a e me'a 'oku 'uhinga ki ai 'a e "kakato" 'oku 'oatu 'a e ngaahi peesi na'e fakahaa'i mo'oni.
savea-tali-uiThe UI / 'oatu 'a e layer 'oku ne fakafehokotaki 'a e sipinga ko ia ki he React. Ko e me’a mahu’inga ko ha
Fakataha, 'Oku nau 'oatu kiate koe ha ngaue kakato, taimi lele 'o e foomu peesi lahi 'o 'ikai tohi ha laine 'e taha 'o e tafe 'a e pule. Ko e fotunga 'o e schema 'iate ia pe, hange ko ia na'e lea'aki kimu'a, ko ha JSON pe — 'ikai ha DSL pe ha me'a 'oku 'a'ana. Te ke lava 'o inline ia, 'omi ia mei ha faile, 'omi ia mei ha API, pe tanaki ia 'i ha kolomu 'o e database pea hydrate ia 'i he taimi lele. Ko e Foomu Tatau, Hange ko e Data . Ko e foomu tatau ‘eni, ‘oku fakahaa’i ‘a e taimi ko ‘eni ko ha me’a JSON. 'Oku fakamatala'i 'e he schema 'a e me'a kotoa pe: fokotu'utu'u, fakamo'oni, ngaahi tu'utu'uni 'o e 'asi, ngaahi fakafuofua 'oku ma'u mei ai, folau 'i he peesi — pea 'oku ne 'oatu ia ki ha Model 'oku ne sivi'i ia 'i he taimi lele. Ko e me’a ‘eni ‘oku hā kakato ai:
export const surveySchema = { hingoa: "Tafe 'a e 'ota", fakahaa'i 'a eProgressBar: "'i 'olunga", ngaahi peesi: [ { hingoa: "fakaikiiki", ngaahi 'elemeniti: [ { fa'ahinga: "tohi", hingoa: "hingoa 'uluaki", 'oku fie ma'u: mo'oni }, {fa'ahinga: "tohi", hingoa: "'imeili", inputqui: mo'oni: fa'ahinga: "'imeili", tohi: "'Imeili 'oku 'ikai ke 'aonga" }] } ] }, {hingoa: "'ota", ngaahi 'elemeniti: [ {fa'ahinga: "tohi", hingoa: "totongi", inputType: "fika", defaultValue: 0 }, {fa'ahinga: "tohi", hingoa: "lahi", {fa'ahinga: phingoa: "tukuhau", defaultValue: 0.1, ngaahi fili: [ { mahu'inga: 0.05, tohi: "5%" }, { mahu'inga: 0.1, tohi: "10%" }, { mahu'inga: 0.15, tohi: "15% totongi" } "] }, {fa'ahinga: "fakahaa'i", {}: si'isi'i fa'ahinga: "fakahaa'i", hingoa: "tukuhau", fakahaa'i: "{fakakatoa si'isi'i} {tukuhau}" }, { fa'ahinga: "fakahaa'i", hingoa: "fakakatoa", fakahaa'i: "{fakakatoa si'isi'i} + {tukuhau}" } ] }, {hingoa: "'akauni", ngaahi 'elemeniti: [ { fa'ahinga: "kulupu letio A", hingoa: "Y: s" fa'ahinga: "tohi", hingoa: "hingoa faka'aonga'i", visibleIf: "{'oku 'i ai 'a e 'akauni} = ''Io'", 'oku fie ma'u: mo'oni }, {fa'ahinga: "tohi", hingoa: "lea fufuu", inputType: "lea fufuu", visibleIf: "{'oku 'i ai 'a e 'akauni} = ''Io', e: min: mo'oni: 6, tohi: "Min 6 ngaahi mata'itohi" }] }, { fa'ahinga: "fakafuofua", hingoa: "fiemalie", rateMin: 1, rateMax: 5 }, {fa'ahinga: "fakakaukau", hingoa: "fakakaukau lelei", visibleIf: "{fiemalie} >= 4" }, "fa'ahinga: 'asiIf: "{fiemalie} <= 2" } ] }, {hingoa: "toe vakai'i", 'asiIf: "{fakakatoa} >= 100", ngaahi 'elemeniti: [] } ]};
Fakafehoanaki 'eni ki he RHF version 'i ha ki'i taimi.
Ko e poloka superRefine na'e fie ma'u fakakonisitutone 'a e hingoa faka'aonga'i mo e lea fufuu kuo mole. visibleIf: "{hasAccount} = ''Io'" fakataha'i mo e isRequired: mo'oni 'oku ne tokanga'i fakataha 'a e ongo hoha'a, 'i he mala'e 'iate ia pe, 'a ia 'oku ke 'amanaki ke ma'u kinaua. Ko e useWatch + useMemo seini na'e fakafuofua'i 'a e subtotal, tukuhau, mo e fakakatoa 'oku fetongi 'aki 'a e ngaahi mala'e fakahaa'i 'e tolu 'oku nau fefakafekau'aki 'aki 'a e hingoa. Ko e tu'unga 'o e peesi vakai'i, 'a ia 'i he RHF version na'e reconstructable pe 'aki hono muimui'i 'o fakafou 'i he showSubmit, 'a e sitepu 3 'oku ne 'omi 'a e va'a. Pea ko e faka'osi, ko e logic 'o e nav button ko ha koloa visibleIf 'e taha 'i he me'a 'o e peesi.
Ko e logic tatau pe 'oku 'i ai. Ko e me’a pe ‘oku ‘oange ‘e he schema ha feitu’u ke nofo ai ‘a ia ‘oku ‘asi mai ‘i he nofo mavahe, kae ‘ikai ke mafola ‘i he konga. Foki, fakatokanga'i ange 'oku faka'aonga'i 'e he schema 'a e fa'ahinga: 'fakahaa' ki he subtotal, tukuhau, mo e fakakatoa. Ko e fakahaa'i 'oku lau-pe pea 'oku faka'aonga'i tefito ke fakahaa'i 'a e ngaahi mahu'inga kuo fakafuofua'i. 'Oku poupou'i foki 'e he SurveyJS 'a e fa'ahinga: 'html' ki he kakano 'o e static, ka ki he ngaahi mahu'inga kuo fakafuofua'i, fakahaa'i ko e fili totonu. Ko 'eni ki he tafa'aki React. Ko e Fakahoko Mo e Fakahu Faingofua ʻaupito. Uaea onComplete ki ho'o API 'i he founga tatau — 'o fakafou 'i he useMutation pe fetch ma'ama'a:
hū mai { useState, fakaʻaongaʻi ʻa eEffect, fakaʻaongaʻiRef } mei he "tali"; hū mai { useMutation } mei he "@ tanstack/tali-fehuʻi"; hū mai { Model } mei he "savea-uho"; hū mai { Savea } mei he "savea-tali-ui"; hū mai "savea-uho/savea;
ngaue 'o e 'ave ki tu'apule'anga SaveaFoomu () { const [fakatata] = faka'aonga'i 'o eState (() => fo'ou Fakatata (saveaSchema));
const liliu = faka'aonga'i 'a e liliu ({ liliuFn: async (fakamatala) => { const res = tatali ki he 'omi ("/ api/ngaahi tu'utu'uni", { founga: "POST", ngaahi 'ulu'i tohi: { "Kanokato-Fa'ahinga": "tohi kole/json" }, sino: JSON.fakahoko (fakamatala), }); kapau (!res.ok) lī fo'ou Hala("Na'e 'ikai lava ke fakahū atu"); fakafoki mai 'a e res.json (); }, });
const liliuRef = faka'aonga'iRef (liliu); mutationRef.lolotonga = liliu; useEffect (() => {const to'oto'o = (fekau'i) => mutationRef.lolotonga.mutate (fekau'i.data); sipinga.'i heFakakakato.tanaki atu (tokotaha);foki () => sipinga.'i heFakakakato.to'o (tokotaha); }, [fakatata]); // ref faka'ehi'ehi mei he toe lesisita handler 'a e render kotoa pe (mutation 'a e ngaahi liliu 'o e 'ulungaanga 'o e me'a)
foki (
<>
Vakai ki he Peni SaveaJS-03-SaveaJS [forked] 'e he mate 'e ono.
onComplete 'oku vela 'i he taimi 'oku a'u ai 'a e tokotaha 'oku ne ngaue'aki ki he ngata'anga 'o e peesi 'oku 'asi fakamuimuitaha. Ko ia kapau 'oku 'ikai 'aupito ke kolosi 'a e fakakatoa 'i he 100 pea 'oku fakalaka 'a e peesi vakai'i, 'Oku kei fana totonu koe'uhi 'oku sivi'i 'e he SurveyJS 'a e 'asi kimu'a pea toki fakapapau'i 'a e 'uhinga 'o e "peesi faka'osi". Pea, sender.data 'oku 'i ai 'a e ngaahi tali kotoa pe fakataha mo e ngaahi mahu'inga kuo fika'i (subtotal, tukuhau, fakakatoa) ko e ngaahi mala'e kalasi 'uluaki, ko ia 'oku tatau 'a e API payload mo e me'a 'oku fakatahataha'i 'e he RHF version 'i he onSubmit. Ko emutationRef sipinga ko e taha tatau pe te ke a’u ki ha feitu’u pe ‘oku ke fie ma’u ha handler me’a tu’uma’u ‘i ha mahu’inga ‘oku liliu ‘i he render kotoa pe — ‘ikai ha me’a SurveyJS-pau fekau’aki mo ia.
'Oku 'ikai ke toe 'i ai ha logic pisinisi 'i he konga React 'i he me'a kotoa pe. ‘Oku ‘ikai ha useWatch, ‘ikai ha JSX tu’unga, ‘ikai ha lau sitepu, ‘ikai ha seini useMemo, ‘ikai ha superRefine. Ko e React ‘oku ne fai ‘a e me’a ‘oku ne mo’oni ‘a e lelei: rendering ha konga mo e wiring ia ki ha ui API. Ko e hā naʻe hiki mei he React?
Hoha'a Fakatoka RHF SaveaJS 'Oku 'asi Ngaahi va'a 'o e JSX 'asiKapau Ngaahi mahu'inga kuo ma'u faka'aonga'i 'a eMatamata / faka'aonga'i 'a eMemo fakahaa'i Ngaahi tu'utu'uni kolosi-mala'e Fakalelei'i lahi Ngaahi tu'unga 'o e Schema Folau tu'unga sitepu Peesi 'oku 'asiKapau Tu'utu'uni tu'utu'uni Tufaki 'i he ngaahi faile Fakatefito 'i he schema .
Ko e me'a 'oku nofo 'i he React ko e fokotu'utu'u, styling, uaea 'o e fakahu, mo e fakataha'i 'o e app, 'a ia ko hono tala, 'a e ngaahi me'a 'oku fakataumu'a mo'oni 'a e React ki ai. Na'e hiki 'a e me'a kotoa pe kehe ki he schema, pea koe'uhi ko e schema ko ha me'a pe JSON, 'e lava ke tauhi ia 'i ha database, versioned tau'ataina mei ho'o code 'o e tohi kole, pe fakatonutonu 'o fakafou 'i he tooling 'i loto 'o 'ikai fie ma'u ha deploy. Ko ha pule koloa 'oku fie ma'u ke liliu 'a e threshold 'oku ne fakatupu 'a e peesi vakai'i 'e lava ke ne fai ia 'o 'ikai ke ne pa ki he konga. Ko e kehekehe fakangaue ‘uhinga ia ki he ngaahi timi ‘oku toutou evolve ai ‘a e ‘ulungaanga ‘o e foomu pea ‘oku ‘ikai ke fakalele ma’u pe ia ‘e he kau ‘enisinia. Ko Fē Ke Ngāue‘aki Ai ‘a e Founga Takitaha? Ko e tu’utu’uni lelei ‘eni ‘oku ngaue kiate au: fakakaukauloto atu ke tamate’i faka’aufuli ‘a e foomu. Ko e hā te ke mole aí?
Kapau ko e ngaahi screens, ‘oku ke fie ma’u ‘a e ngaahi foomu ‘oku fakalele ‘e he konga. Kapau ko e logic pisinisi, hange ko e ngaahi thresholds, ngaahi tu’utu’uni branching, mo e ngaahi fie ma’u fakatu’unga ‘oku nau encode ‘a e ngaahi tu’utu’uni mo’oni, ‘oku ke fie ma’u ha misini schema.
'I he founga tatau, kapau ko e ngaahi liliu 'oku ha'u ki ho hala 'oku lahi taha fekau'aki mo e ngaahi faka'ilonga, ngaahi mala'e, mo e fokotu'utu'u, 'e ngaue lelei 'a e RHF kiate koe. Kapau ‘oku nau fekau’aki mo e ngaahi tu’unga, ngaahi ola, mo e ngaahi tu’utu’uni ‘e fie ma’u nai ke fakatonutonu ‘e ho’o ops pe timi fakalao ‘i ha ho’ata Tusite ‘o ‘ikai ke faile ha tikite, ko e sipinga ‘o e schema mo e SurveyJS ko e fe’unga faitotonu ange ia. Ko e ongo founga ko eni 'oku 'ikai ke na fe'au'auhi mo'oni. ‘Oku nau fakafepaki’i ‘a e ngaahi kalasi kehekehe ‘o e ngaahi palopalema, pea ko e fehalaaki ‘oku taau ke faka’ehi’ehi mei ai ko e mismatching ‘a e abstraction ki he mamafa ‘o e logic — faito’o ha sisitemi tu’utu’uni hange ha konga koe’uhi ko e me’angaue maheni ia, pe a’u ki ha misini tu’utu’uni koe’uhi na’e tupulaki ha foomu ki he sitepu ‘e tolu pea ma’u ha mala’e tu’unga. Ko e fotunga na'a mau langa heni 'oku tangutu ofi ki he ngata'anga 'o fakakaukau'i, faingata'a fe'unga ke fakahaa'i 'a e faikehekehe ka 'oku 'ikai ke fu'u lahi 'aupito 'o ongo'i rigged 'a e fakafehoanaki. Ko e lahi taha 'o e ngaahi foomu mo'oni kuo ma'u unwieldy 'i ho'o codebase mahalo 'oku tangutu ofi ki he ngata'anga tatau, pea ko e fehu'i 'oku angamaheni 'aki pe pe kuo fakahingoa 'e ha taha 'a e me'a 'oku nau mo'oni. Faka'aonga'i 'a e Foomu Hook React + Zod 'i he taimi:
Ko e ngaahi foomu 'oku fakatefito 'i he CRUD; Ko e logic 'oku loloto pea UI-fakalele; ʻOku ʻa e kau ʻenisiniá ʻa e tōʻonga kotoa pē; ʻOku kei hoko pē ʻa e backend ko e maʻuʻanga ʻo e moʻoní.
Faka'aonga'i 'a e SurveyJS 'i he taimi:
ʻOku fakakouti ʻe he ngaahi foomu ʻa e ngaahi tuʻutuʻuni fakapisinisí; 'Oku evolve tau'ataina 'a e ngaahi tu'utu'uni mei he UI; Kuo pau ke 'asi, 'atita'i, pe versioned 'a e logic; ʻOku tākiekina ʻe he kau ʻikai ʻenisiniá ʻa e tōʻongá; Kuo pau ke lele 'a e foomu tatau 'i he ngaahi frontends lahi.
