Kuvaka Dynamic Mafomu MuReact uye Next.js

By Web Design · · 14 min read · 743 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
Kuvaka Dynamic Mafomu MuReact uye Next.js

Ichi chinyorwa chinotsigirwa neSurveyJS Kune muenzaniso wepfungwa vazhinji vanogadzira React vanogovana vasina kumbotaura nezvazvo zvinonzwika. Mafomu iwayo anogara achifanirwa kunge ari zvikamu. Izvi zvinoreva stack senge:

React Hook Form yenzvimbo yenzvimbo (zvishoma-renders, ergonomic field kunyoreswa, kudyidzana kwakakosha). Zod yekusimbisa (kurongeka kwekuisa, kusimbiswa kwemuganho, mhando-yakachengeteka parsing). React Mubvunzo we backend: kuendesa, kuedzazve, caching, server sync, zvichingodaro.

Uye kune akawanda mafomu - ako ekupinda zviratidziro, ako mapeji ezvirongwa, yako CRUD modal - izvi zvinoshanda chaizvo. Chidimbu chega chega chinoita basa racho, vanonyora zvakachena, uye iwe unogona kuenda kune zvikamu zvekushandisa kwako izvo zvinonyatso siyanisa chigadzirwa chako. Asi nguva nenguva, fomu rinotanga kuunganidza zvinhu zvakaita semirau yekuona inotsamira pamhinduro dzekutanga, kana hunhu hwakatorwa hunoyerera nemuminda mitatu. Pamwe nyangwe mapeji ese anofanirwa kudururwa kana kuratidzwa zvichibva pahuwandu hwekumhanya. Iwe unobata yekutanga conditional ine useWatch uye inline bazi, izvo zvakanaka. Ipapo mumwe. Ipapo iwe uri kusvika kune superRefine yekuisa muchinjika-mumunda mitemo iyo yako Zod schema haigone kutaura nenzira yakajairika. Zvadaro, nhanho yekufambisa inotanga kudonha bhizinesi pfungwa. Pane imwe nguva, iwe unotarisa pane zvawakavaka uye woona kuti iyo fomu haisisiri iyo UI zvakare. Iyo yakawanda yesarudzo maitiro, uye chikamu chemuti ndiko kwawakaitika kuti uichengete. Apa ndipo pandinofunga kuti chimiro chepfungwa chemafomu muReact chinoputsika, uye haisi mhosva yemunhu. Iyo RHF + Zod stack yakanaka pane yayakagadzirirwa. Nyaya iripo ndeyekuti isu tinowanzo ramba tichiishandisa kupfuura iyo iyo yekubvisa kwayo inoenderana nedambudziko nekuti imwe nzira inoda imwe nzira yekufunga nezvemafomu zvachose. Ichi chinyorwa chiri pamusoro peimwe nzira iyoyo. Kuti tiratidze izvi, isu tichavaka iyo chaiyo yakawanda-nhanho fomu kaviri:

NeReact Hook Form + Zod wired to React Query yekuendesa, NeSurveyJS, iyo inobata fomu se data - iri nyore JSON schema - pane chikamu chemuti.

Zvimwe chete zvinodikanwa, zvakafanana zvemamiriro ezvinhu, yakafanana API kufona kumagumo. Ipapo tinozonyatso nyora izvo zvakafamba uye chii chakasara, uye toronga nzira inoshanda yekusarudza kuti ndeipi modhi yaunofanira kushandisa, uye rinhi. Fomu yatiri kugadzirira:

Iyi fomu ichashandisa 4-nhanho kuyerera: Danho 1: Tsanangudzo

Zita rekutanga (rinodiwa), Email (inodiwa, inoshanda fomati).

Danho rechipiri: Odha

Mutengo weyuniti, Huwandu, Mutero, Zvakatorwa: Subtotal, Mutero, Total.

Nhanho 3: Akaundi & Mhinduro

Une account here? (Hongu/Kwete) Kana Hongu → username + password, zvese zvinodiwa. Kana Kwete → email yakatounganidzwa mudanho rekutanga.

Chiyero chekugutsikana (1–5) Kana ≥ 4 → bvunza kuti “Chii chamakafarira?” Kana ≤ 2 → akabvunza “Chii chatingavandudza?”

Danho rechina: Ongorora

Inowanikwa chete kana yakazara >= 100 Kuendesa kwekupedzisira.

Izvi hazvina kunyanyisa. Asi zvakakwana kuratidza kusiyana kwezvivakwa. Chikamu 1: Chikamu-Chinofambiswa (React Hook Form + Zod) Installation npm isa react-hook-form zod @hookform/resolvers @tanstack/react-query

Zod Schema Ngatitangei neZod schema, nekuti kazhinji ndipo panotanga chimiro chefomu. Pamatanho maviri ekutanga - ruzivo rwemunhu uye kurongeka - zvese zvakatwasuka: tambo dzinodiwa, nhamba dzine hushoma, uye enum. Chikamu chinonakidza chinotanga kana iwe uchiedza kuratidza mitemo ine chirevo.

unza {z } kubva ku "zod";

export const formSchema = z.object({ firstName: z.string().min(1, "Inodiwa"), email: z.string().email("Imeiri isiriyo"), mutengo: z.number().min(0), uwandu: z.number().min(1), taxRate: z.number(),z.Ye.Yee:Acnum" z.string().optional(), password: z.string().optional(), kugutsikana: z.number().min(1).max(5), positiveFeedback: z.string().optional(), improvementFeedback: z.string().optional(),}).superRefine((data, ctx) => {kana (ccount)(data.=Year) =us {ctx.addIssue({code: "custom", nzira: ["username"], message: "Inodiwa"}} } kana (!data.password || data.password.length < 6) {ctx.addIssue({code: "custom", path: ["password"]), character:}}}

kana (data.satisfaction >= 4 && !data.positiveFeedback) {ctx.addIssue({code: "custom", nzira: ["positiveFeedback"], meseji: "Ndapota govera zvawafarira"}); }

kana (data.satisfaction <= 2 && !data.improvementFeedback) {ctx.addIssue({code: "custom", nzira:["improvementFeedback"], meseji: "Ndapota tiudze zvekuvandudza"}); }});

kunze mhando FormData = z.infer;

Ziva kuti zita rekushandisa nepassword zvakataipa sesarudzo () kunyangwe zvichidikanwa nekuti Zod's type-level schema inotsanangura chimiro chechinhu, kwete mitemo inotonga kana minda ine basa. Izvo zvinodikanwa zvinofanirwa kugara mukati me superRefine, iyo inomhanya mushure mekunge chimiro chasimbiswa uye kuwana chizere chinhu. Kuparadzana ikoko hakusi kukanganisa; ndizvo chaizvo zvakagadzirirwa chishandiso: superRefine ndipo panoenda muchinjiko-mumunda pfungwa kana isingagone kuratidzwa mune schema chimiro pachayo. Chiri kucherechedzwawo apa ndechekuti schema iyi isingatauri. Iyo haina pfungwa yemapeji, hapana pfungwa yekuti ndeapi minda inoonekwa panguva ipi, uye hapana pfungwa yekufambisa. Zvose izvozvo zvichagara kumwewo. Form Component

import {useForm, useWatch } kubva ku "react-hook-form";import {zodResolver} kubva ku"@hookform/resolvers/zod";import {useMutation} kubva ku"@tanstack/react-query";import {useState, useMemo} kubva ku"react";import {formSchema} kubva ku"Daschema";

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

mhando OrderPayload = FormData & {subtotal: nhamba; mutero: nhamba; hwerengedzo: nhamba };

kunze basa RHFMultiStepForm () {const [danho, setStep] = useState(0);

const mutation = useMutation ({ mutationFn: async (mubhadharo: OrderPayload) => { const res = kumirira kutora ("/ api/mirairo", { nzira: "POST", misoro: {"Content-Type": "application/json" }, muviri: JSON.stringify(payload), }); kana (!res.ok) ikande Chikanganiso chitsva("Yatadza kuunza"); return res.json(); }, });

const {rejista, control, handleSubmit, formState: {zvikanganiso}, } = useForm({solver: zodResolver(formSchema), defaultValues: {mutengo: 0, uwandu: 1, taxRate: 0.1, kugutsikana: 3, hasAccount: "Kwete);},}} const mutengo = useWatch({kutonga, zita: "mutengo" }); const quantity = useWatch({kudzora, zita: "huwandu"}); const taxRate = useWatch({control, zita: "taxRate"}); const hasAccount = useWatch({kudzora, zita: "hasAccount"}); const kugutsikana = useWatch({kudzora, zita: "kugutsikana"}); const subtotal = useMemo(() => (mutengo ?? 0) * (huwandu ?? 1), [mutengo, huwandu]); const tax = useMemo(() => subtotal * (taxRate ?? 0), [subtotal, taxRate]); const total = useMemo(() => subtotal + tax, [subtotal, tax]); const onSubmit = (data: FormData) => mutation.mutate({...data, subtotal, tax, total }); const showSubmit = (nhanho === 2 && yakazara <100) || (nhanho === 3 && zvachose >= 100)

dzorera (

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

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

Subtotal: {subtotal}
Mutero: {tax}
Total: {total}
)}

{step === 2 && ( <>

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

{kugutsikana >= 4 && (