Dhisida foomamka firfircoon ee falcelinta iyo Xiga.js

By Web Design · · 14 min read · 766 views
Share: ✕ Twitter in LinkedIn f Facebook
Read in: aa ace af ak alz am ar as awa ay az ba ban be bew
+191 more
Dhisida foomamka firfircoon ee falcelinta iyo Xiga.js

Maqaalkan waxaa kafaala qaaday SurveyJS Waxaa jira qaab maskaxeed inta badan horumariyayaasha React ay wadaagaan iyaga oo aan waligood si sare uga hadlin. Foomamkaas ayaa had iyo jeer loo maleynayaa inay yihiin qaybo. Tani waxay ka dhigan tahay xirmo sida:

Foomka Hook React ee gobolka deegaanka (dib u soo celinta ugu yar, diiwaangelinta goobta ergonomic, isdhexgalka lama huraanka ah). Zod si loo ansixiyo (saxnimada gelinta, ansixinta xadka, kala saarista nooca-ammaan ah). Ka jawaab su'aalaha dhabarka: soo gudbinta, dib u tijaabinta, kaydinta, isku xidhka serverka, iyo wixii la mid ah.

Iyo inta badan foomamka - shaashadaha soo gelida, boggaga dejinta, moodooyinkaaga CRUD - tani waxay si fiican u shaqeysaa. Qayb kastaa waxay qabataa shaqadeeda, si nadiif ah ayay u diyaariyaan, waxaadna u gudbi kartaa qaybaha codsigaaga oo si dhab ah u kala sooca alaabtaada. Laakin hal mar oo ka mid ah, foomku waxa uu bilaabaa ururinta waxyaabo ay ka mid yihiin xeerarka aragga ee ku xidhan jawaabihii hore, ama qiyamka la soo saaray ee ku soo qulqulaya saddex qaybood. Waxaa laga yaabaa in xitaa bogag dhan oo ay tahay in la boodo ama la muujiyo iyadoo lagu saleynayo wadarta guud. Waxa aad ku xalinaysaa shuruuda koowaad ee isticmaalkaWatch iyo laan khad dhexdeed ah, taas oo fiican. Ka dibna mid kale. Markaa waxaad gaadhaysaa superRefine si aad u dejiso xeerarka goobta-goysyada ee Zod schemaagu aanu si caadi ah u sheegi karin. Kadibna, talaabada navigation-ka waxa uu bilaabaa soo daadashada macquulka ganacsiga. Mar marka qaarkood, waxaad eegtaa waxaad dhistay oo waxaad ogaataa in foomku aanu run ahaantii UI ahayn. Waa wax badan oo ka mid ah habka go'aan qaadashada, iyo geedka ka kooban yahay kaliya meesha aad ku dhacday inaad ku kaydiso. Tani waa halka aan u maleynayo in qaabka maskaxeed ee foomamka React uu burburo, oo runtii qofna qalad ma leh. Xirmada RHF + Zod waxay aad ugu fiican tahay waxa loogu talagalay. Arrintu waa in aan u isticmaalno ka gudubno meesha ay wax-soo-saarkeedu ku habboon yihiin dhibaatada sababtoo ah beddelka ayaa u baahan hab ka duwan oo looga fikiro foomamka gebi ahaanba. Maqaalkani waxa uu ku saabsan yahay beddelkaas. Si tan loo muujiyo, waxaanu dhisi doonaa isla foomkii talaabooyin badan oo isku mid ah laba jeer:

Foomka React Hook + Zod ayaa la xidhay si uu uga falceliyo weydiinta soo gudbinta, Iyada oo la adeegsanayo SurveyJS, kaas oo ula dhaqmaya foomka xog ahaan - qorshe JSON oo fudud - halkii uu ka ahaan lahaa geed ka kooban.

Shuruudo isku mid ah, caqli shuruudaysan, isla wacitaanka API dhamaadka. Kadibna waxaanu si sax ah u qaabayn doonaa waxa dhaqaaqay iyo waxa hadhay, waxaanan dejin doonaa hab wax ku ool ah oo lagu go'aamiyo moodeelka ay tahay inaad isticmaasho, iyo goorta. Foomka aan dhisayno:

Foomkan wuxuu isticmaali doonaa socodka 4-talaabo: Tallaabada 1: Faahfaahin

Magaca koowaad (loo baahan yahay), iimaylka (loo baahan yahay, qaab sax ah).

Tallaabada 2: Dalbo

Qiimaha cutubka, Tirada, Heerka canshuurta, Ka soo jeeda: Wadarta guud, Canshuur, Wadarta

Tallaabada 3: Xisaab & Jawaab celin

Xisaab ma leedahay? (Haa/Maya) Haddii Haa → username + password, labadaba loo baahan yahay. Haddii Maya → iimaylka mar hore la ururiyay tallaabada 1.

Qiimaynta qanacsanaanta (1-5) Haddii ≥ 4 → weydii "Maxaad jeclayd?" Haddii ≤ 2 → weydii "Maxaan hagaajin karnaa?"

Tallaabada 4: Dib u eegis

Kaliya ayaa soo muuqda haddii wadarta guud >= 100 Soo gudbinta kama dambaysta ah.

Tani maaha mid xad dhaaf ah. Laakiin waa ku filan inaad soo bandhigto kala duwanaanshaha dhismaha. Qaybta 1: Qayb-Waday (Foomka Hook React + Zod) Rakibaadda npm rakib react-hook-form zod @hookform/resolvers @tanstack/react-query

Zod Schema Aan ku bilowno schema Zod, sababtoo ah inta badan waa meesha qaabka qaabka loo sameeyo. Labada tillaabo ee hore - faahfaahinta shakhsiyeed iyo dalbashada soo-gelinta - wax walbaa waa toosan yihiin: xargaha loo baahan yahay, tirooyinka leh ugu yar, iyo tiro. Qaybta xiisaha lihi waxay bilaabataa markaad isku daydo inaad muujiso xeerarka shuruudda ah.

ka soo daji {z} "zod";

dhoofinta const formSchema = z.object ({magaca kowaad: z.string().min(1, "loo baahan yahay"), iimaylka: z.string().email("email aan sax ahayn"),qiimaha:z.number().min(0), tirada: z.number().min(1), cashuurta: z.number(), waxa uu leeyahayAccount: z.enum ([") string ctx.addIssue ({ code: "caado", waddo: ["username"], fariin: "loo baahan yahay"}); } haddii (! data.password || data.password.length <6) {ctx.addIssue

haddii (data.satisfaction>= 4 && !data.positiveFeedback) {ctx.addIssue ({ code: "custom", dariiqa: ["positiveFeedback"], fariin: "Fadlan wadaag waxa aad jeceshay"}); }

haddii (data.satisfaction <= 2 && !data.improvementFeedback) {ctx.addIssue({ code: "custom", path:["improvementFeedback"], fariin: "Fadlan noo sheeg waxa la hagaajinayo"}); }});

nooca dhoofinta FormData = z.infer;

U fiirso in magaca isticmaalaha iyo erayga sirta ah loo qoray si ikhtiyaari ah () in kasta oo shuruud ahaan looga baahan yahay sababtoo ah qaabka nooca Zod wuxuu qeexayaa qaabka shayga, ma aha xeerarka xukuma marka beeruhu muhiim yihiin. Shuruudaha shuruudu waa inay ku noolaadaan gudaha superRefine, kaas oo socda ka dib marka qaabka la ansaxiyo oo uu galo shayga buuxa. Kala soocidaasi ceeb maaha; waa waxa kaliya ee aaladda loogu talagalay: superRefine waa meesha macquulka-goob-goobeedka marka aan lagu sheegi karin qaab-dhismeedka schema laftiisa. Waxa sidoo kale xusid mudan halkan waa waxa aanu qorshahani muujinayn. Ma laha fikrad bogag ah, ma jirto fikrad ah meelaha laga arki karo meesha, iyo fikradda navigation ma laha. Waxaas oo dhan waxay ku noolaan doonaan meel kale. Qaybta Foomka

ka soo dejinta {useForm, useWatch} ka "react-hook-form"; ka soo daji {zodResolver} ka "@hookform/resolvers/zod";import {useMutation } from "@tanstack/react-query";import {useState, useMemo } ka "react"/ka soo dejinta; FormSchema, nooca

const STEPS = ["faahfaahin", "dalabka", "account", "dib u eegis"];

nooca OrderPayload = FormData & {-hoosaadka: nambar; canshuurta: tirada; wadarta: nambar};

shaqada dhoofinta RHFMultiStepForm () {const [tallaabo, setStep] = useState (0);

isbeddelka is-beddelka = isticmaalka isbeddelka ({ mutationFn: async (lacag-bixin: OrderPayload) => { const res = sug soo doonan("/api/orders", { habka: "POST", madax-madaxeed: {"Content-Nooca": "application/json" }, jirka: JSON.stringify(load), } haddii (!res.ok) tuuro Khalad cusub ("Ku guuldareystay in la gudbiyo"); soo celi res.json (); }, }

const {diwaangeli, control, handleSubmit, formState: { khaladaad},} = useForm({ xaliye: zodResolver(formSchema), defaultValues: {qiimaha: 0, tirada: 1, cashuurta: 0.1, qanacsanaanta: 3, hasAccount: "Maya",} qiimaha const = useWatch ({control, name: "price"}); quantity = isticmaalkaWatch ({kontoroolka, magaca: "tiro"}); const taxRate = isticmaalkaWatch ({kontoroolka, magaca: "TaxRate"}); const hasAccount = useWatch ({kontoroolka, magaca: "hasAccount"}); qanacsanaan la'aanta = isticmaalkaWatch ({kontoroolka, magaca: "qanacsanaanta"}); const subtotal = useMemo(() => (qiimaha ?? 0) * (tiro ?? 1), [qiimaha, tirada]); cashuurta cashuurta = isticmaalkaMemo(() => wadarta hoose * (Qiimaha cashuurta ?? 0), wadarta guud = isticmaalkaMemo(() => wadarta guud + cashuurta, [wax yar, cashuur]); const onSubmit = (xogta: FormData) => isbedel.mutate const showSubmit = (tallaabo === 2 && wadarta <100) || (tallaabo === 3 && wadarta >= 100)

soo celi (

{tallaabo === 0 && ( <> < gelida {... diiwangeli("email")} placeholder === 0 && )}

{tallaabo === 1 && ( <> 5% 10%

Subtotal: {subtotal}
Canshuur: {canshuur}
Guud: {wadarta}
)}

{tallaabo === 2 && ( <>

{hasAccount === "Haa" && ( <> )}

{ku qanacsanaanta>= 4 && (