Ho Aha Liforomo Tse Matla ka React And Next.js

By Web Design · · 14 min read · 759 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
Ho Aha Liforomo Tse Matla ka React And Next.js

Sengoliloeng sena se tšehelitsoe ke SurveyJS Ho na le mohlala oa kelello oo bahlahisi ba React ba o arolelanang ntle le ho bua ka eona ka lentsoe le phahameng. Liforomo tseo kamehla li lokela ho ba likarolo. Sena se bolela stack e kang:

React Hook Foromo bakeng sa naha ea lehae (li-renders tse nyane, ngoliso ea sebaka sa ergonomic, tšebelisano ea bohlokoa). Zod bakeng sa netefatso (ho nepahala ho kentsoeng, netefatso ea moeli, ho arola ka mokhoa o bolokehileng). React Query bakeng sa backend: tlhahiso, leka hape, caching, sync ea seva, joalo-joalo.

'Me bakeng sa mefuta e mengata - li-skrini tsa hau tsa ho kena, maqephe a litlhophiso tsa hau, mekhoa ea hau ea CRUD - sena se sebetsa hantle haholo. Sekhechana se seng le se seng se etsa mosebetsi oa sona, se qapa ka mokhoa o hloekileng, 'me u ka fetela likarolong tsa kopo ea hau tse hlileng li khethollang sehlahisoa sa hau. Empa nako le nako, foromo e qala ho bokella lintho tse kang melao ea ponahalo e itšetlehileng ka likarabo tsa pejana, kapa litekanyetso tse nkiloeng tse phunyeletsang likarolo tse tharo. Mohlomong le maqephe ohle a tlamehang ho tloloa kapa ho bonts'oa ho ipapisitsoe le kakaretso. U sebetsana le maemo a pele ka useWatch le lekala le inline, ho lokile. Ebe e mong. Ebe u hahamalla superRefine ho kenyelletsa melao ea maballo eo schema ea hau ea Zod e ke keng ea e hlalosa ka tsela e tloaelehileng. Joale, navigation ea mehato e qala ho sotha khoebo. Ka nako e 'ngoe, u sheba seo u se hahileng 'me ua hlokomela hore foromo ha e sa le UI. Ke ts'ebetso ea ho etsa liqeto, 'me sefate sa motsoako ke moo u ileng ua se boloka teng. Mona ke moo ke nahanang hore mohlala oa kelello oa liforomo ho React oa senyeha, 'me ha se phoso ea motho. RHF + Zod stack e ntle haholo ho seo e se etselitsoeng. Taba ke hore re tloaetse ho e sebelisa ho feta moo lintlha tsa eona li tsamaellanang le bothata hobane mokhoa o mong o hloka mokhoa o fapaneng oa ho nahana ka mefuta ka botlalo. Sengoliloeng sena se bua ka khetho eo. Ho bonts'a sena, re tla aha mokhoa o ts'oanang oa mehato e mengata habeli:

Ka React Hook Foromo + Zod e kentsoeng mohala ho React Query bakeng sa tlhahiso, Ka SurveyJS, e nkang foromo e le data - schema e bonolo ea JSON - ho fapana le sefate sa motsoako.

Litlhokahalo tse ts'oanang, mohopolo o ts'oanang oa maemo, mohala o tšoanang oa API qetellong. Ebe re tla etsa 'mapa hantle hore na ho fallisitsoe eng le hore na ho ile ha sala eng,' me re fane ka mokhoa o sebetsang oa ho etsa qeto ea hore na u lokela ho sebelisa mofuta ofe, le neng. Foromo eo re e etsang:

Foromo ena e tla sebelisa phallo ea mehato e 4: Mohato oa 1: Lintlha

Lebitso (ho hlokahala), Imeile (e hlokehang, sebopeho se nepahetseng).

Mohato oa 2: Odara

Theko ea yuniti, Bongata, Sekhahla sa lekhetho, E nkiloeng: Kakaretso, Lekhetho, Kakaretso.

Mohato oa 3: Account & Feedback

O na le ak'haonte? (Ee/Che) Haeba E → lebitso la mosebelisi + password, ka bobeli lia hlokahala. Haeba Che → lengolo-tsoibila le se le bokeletsoe mohatong oa 1.

Boemo ba khotsofalo (1–5) Haeba ≥ 4 → botsa "U ratile eng?" Haeba ≤ 2 → botsa “Re ka ntlafatsa eng?”

Mohato oa 4: Hlahloba

E hlaha feela haeba kakaretso >= 100 Tlhahiso ea ho qetela.

Sena ha se fetelletseng. Empa ho lekane ho pepesa liphapang tsa meralo. Karolo ea 1: E tsamaisoang ke Karolo (React Hook Form + Zod) Ho kenya npm kenya react-hook-form zod @hookform/resolvers @tanstack/react-query

Zod Schema Ha re qale ka schema ea Zod, hobane hangata ke moo sebopeho sa sebopeho se theoang teng. Bakeng sa mehato e 'meli ea pele - lintlha tsa botho le ho kenya taelo - ntho e' ngoe le e 'ngoe e otlolohile: likhoele tse hlokahalang, linomoro tse nang le bonyane, le enum. Karolo e thahasellisang e qala ha u leka ho hlalosa melao ea maemo.

kenya {z } ho "zod";

export const formSchema = z.object({ firstName: z.string().min(1, "Ea Hlokahala"), imeile: z.string().imeile("Imeile e sa sebetseng"), theko: z.number().min(0), palo: z.number().min(1), Lekhetho: z.number(), e na.(Yes) "Acnum" z.string().ka boikhethelo(), phasewete: z.string().khetho (), khotsofalo: z.number().min(1).max(5), positiveFeedback: z.string().optional(), improvementFeedback: z.string().optional(),}).superRefine((data, ctx) => {haeba (data.=Yes" => data. {ctx.addIssue({khoutu: "tloaelo", tsela: ["lebitso la mosebelisi"], molaetsa: "Ho hlokahala" }} } haeba (!data.password || data.password.length < 6) {ctx.addIssue({code: "custom", path: ["password"]); molaetsa: "}});

haeba (data.satisfaction >= 4 && !data.positiveFeedback) {ctx.addIssue({khoutu: "custom", tsela: ["positiveFeedback"], molaetsa: "Ka kopo, arolelana seo u se ratileng" }); }

haeba (data.satisfaction <= 2 && !data.improvementFeedback) {ctx.addIssue({khoutu: "custom", tsela:["improvementFeedback"], molaetsa: "Ka kopo, re bolelle seo re lokelang ho se ntlafatsa" }); }});

mofuta oa thomello ea thepa FormData = z.infer;

Hlokomela hore lebitso la mosebelisi le password li ngotsoe joalo ka boikhethelo () leha li hlokahala ho latela maemo hobane schema ea mofuta oa Zod e hlalosa sebopeho sa ntho, eseng melao e laolang ha masimo a bohlokoa. Tlhokahalo ea maemo e tlameha ho phela ka har'a superRefine, e tsamaeang ka mor'a hore sebopeho se netefatsoe 'me se khone ho fumana ntho e feletseng. Karohano eo hase sekoli; ke sona seo sesebelisoa se etselitsoeng sona: superRefine ke moo logic ea cross-field e eang ha e ke ke ea hlahisoa ka sebopeho sa schema ka boeona. Se hlokomelehang hape ke seo schema sena se sa se hlaloseng. Ha e na maikutlo a maqephe, ha ho na maikutlo a hore na ke masimo afe a bonahalang ka nako efe, 'me ha ho na mohopolo oa ho tsamaea. Tseo tsohle di tla phela sebakeng se seng. Karolo ea Foromo

kenya {useForm, useWatch } ho tsoa ho "react-hook-form"; tlisa {zodResolver } ho tsoa ho "@hookform/resolvers/zod"; kenya {useMutation } ho tsoa ho "@tanstack/react-query"; tlisa {useState, useMemo } ho tsoa ho "react"; kenya {formSchema} ho tsoa ho "Daschema";

const STEPS = ["details", "order", "account", "review"];

thaepa OrderPayload = FormData & {subtotal: nomoro; lekhetho: nomoro; kakaretso: palo };

mosebetsi oa ho romela thepa ka ntle RHFMultiStepForm() { const [mohato, setStep] = useState(0);

const mutation = useMutation ({ phetohoFn: async (ho lefa: OrderPayload) => { const res = emela ho lata ("/api/oda", { mokhoa: "POST", lihlooho: {"Mofuta-Mofuta": "application/json" }, 'mele: JSON.stringify(payload), }); haeba (!res.ok) lahlela Phoso e ncha("E hlolehile ho fana"); khutla res.json(); }, });

const {rejista, taolo, handleSubmit, formState: { liphoso }, } = useForm({solver: zodResolver(formSchema), defaultValues: {theko: 0, quantity: 1, taxRate: 0.1, satisfaction: 3, hasAccount: "Che);",},}} const price = useWatch({taolo, lebitso: "theko" }); const quantity = useWatch({control, name: "quantity" }); const taxRate = useWatch({taolo, lebitso: "taxRate" }); const hasAccount = useWatch({taolo, lebitso: "hasAccount" }); const satisfaction = useWatch({taolo, lebitso: "khotsofalo" }); const subtotal = useMemo(() => (theko ?? 0) * (palo ?? 1), [theko, bongata]); const tax = useMemo(() => subtotal * (taxRate ?? 0), [subtotal, taxRate]); const total = useMemo(() => palo e nyenyane + lekhetho, [kakaretso, lekhetho]); const onSubmit = (data: FormData) => mutation.mutate({ ... data, subtotal, tax, total }); const showSubmit = (mohato === 2 && kakaretso <100) || (mohato === 3 && kakaretso >= 100)

khutlisetsa (

{step === 0 && ( <> )}

{step === 1 && ( <> 5% 10% 15%

Kakaretso: {subtotal}
Lekhetho: {tax}
Kakaretso: {total}
)}

{step === 2 && ( <>

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

{khotsofalo >= 4 && (