Reaktiw we Next.js-da dinamiki formalary gurmak

By Web Design · · 14 min read · 918 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
Reaktiw we Next.js-da dinamiki formalary gurmak

Bu makala SurveyJS tarapyndan hemaýatkärlik edilýär React işläp düzüjileriň köpüsiniň hiç wagt sesini çykarman paýlaşýan akyl nusgasy bar. Bu görnüşler elmydama komponentler bolmalydyr. Munuň ýaly stakany aňladýar:

Stateerli ştat üçin çeňňek formasyny reaksiýa ediň (minimal täzeden görkezişler, ergonomiki meýdan belligi, hökmany täsir). Barlamak üçin kod (giriş dogrylygy, araçäk tassyklamasy, görnüşli howpsuz derňew). Yzky sorag üçin reaksiýa: tabşyrmak, gaýtadan synanyşmak, keş keşdesi, serweri sinhronlamak we ş.m.

Formalaryň köpüsi üçin - giriş ekranlaryňyz, sazlama sahypalaryňyz, CRUD modallaryňyz üçin bu hakykatdanam gowy işleýär. Her bir eser öz işini ýerine ýetirýär, arassa düzýär we programmaňyzyň önümiňizi hakykatdanam tapawutlandyrýan böleklerine geçip bilersiňiz. Everyöne wagtal-wagtal bir görnüş, öňki jogaplara bagly bolan görünmek düzgünleri ýa-da üç ugurdan geçýän gymmatlyklar ýaly zatlary toplap başlaýar. Belki-de, tutuşlygyna geçip gitmeli ýa-da görkezilmeli sahypalaryň hemmesi. Ilkinji şertli ulanyşWatch we içerki şahasy bilen işleýärsiňiz, bu gowy. Soň başga. Soňra Zod shemaňyzyň adaty görnüşde beýan edip bilmejek meýdan düzgünlerini kodlamak üçin superRefine ýetýärsiňiz. Soň bolsa, ädim nawigasiýasy biznes logikasyny syzdyryp başlaýar. Belli bir wagt, guran zatlaryňyza seredip, formanyň indi UI däldigine göz ýetirersiňiz. Bu has köp karar bermek prosesi we komponent agajy ony saklamak üçin edil şol ýerde. Ine, meniň pikirimçe, React görnüşleriniň akyl nusgasy bozulýar we hakykatdanam hiç kimiň ýalňyşlygy ýok. RHF + Zod stakasy, dizaýn üçin ajaýyp. Mesele, abstraktlaryň meselä gabat gelýän ýerinden geçmäge ýykgyn edýäris, sebäbi alternatiw formalar barada başgaça pikirlenmegi talap edýär. Bu makala şol alternatiwa barada. Muny görkezmek üçin takyk iki basgançakly görnüşi iki gezek gurarys:

React Hook Form + Zod bilen, React Query-a tabşyrmak üçin simli, Forma maglumat hökmünde seredýän SurveyJS bilen, komponent agajy däl-de, ýönekeý JSON shemasy.

Birmeňzeş talaplar, şol bir şertli logika, ahyrynda şol bir API jaňy. Soňra nämäniň göçendigini we nämäniň galandygyny anyk kesgitläris we haýsy modeli ulanmalydygyňyzy we haçan ulanmalydygyňyzy kesgitlemegiň amaly usulyny kesgitläris. Gurýan görnüşimiz:

Bu görnüş 4 basgançakly akymy ulanar: 1-nji ädim: Jikme-jiklikler

Ady (hökmany), E-poçta (zerur, dogry format).

2-nji ädim: Sargyt

Bölümiň bahasy, Mukdar, Salgyt stawkasy, Alnan: Subtotal, Salgyt, Jemi.

3-nji ädim: Hasap we seslenme

Hasabyňyz barmy? (Hawa /) ok) Hawa → ulanyjy ady + paroly bolsa, ikisi hem zerur. Eger No → e-poçta eýýäm 1-nji ädimde toplanan bolsa.

Kanagatlanma derejesi (1–5) ≥ 4 → “Näme haladyňyz?” Diýip soraň. ≤ 2 → “Näme gowulaşdyryp bileris?” Diýip sorasa.

4-nji ädim: Syn

Diňe jemi> = 100 bolsa peýda bolýar Jemleýji tabşyryk.

Bu aşa däl. Emma binagärlik tapawudyny paş etmek ýeterlikdir. 1-nji bölüm: Komponent bilen dolandyrylýar (React Hook Form + Zod) Gurnama npm react-hook-form zod @ hookform / çözüjiler @ tanstack / react-query guruň

Zod shemasy Zod shemasyndan başlalyň, sebäbi adatça forma görnüşi kesgitlenýär. Ilkinji iki ädim üçin - şahsy jikme-jiklikler we sargyt girişleri - hemme zat gönümel: zerur setirler, minimal sanlar we san. Gyzykly bölüm, şertli düzgünleri aýtjak bolanyňyzda başlaýar.

"zod" -dan {z import;

eksport const formSchema = z.object ({firstName: z.string (). min (1, "Gerekli"), e-poçta: z.string (). e-poçta ("Nädogry e-poçta"), bahasy: z.number () min. z.string (). islege bagly (), parol: z.string (). islege bagly (), kanagatlanma: z.number () min. (! data.username) {ctx.addIssue ({kody: "adaty", ýol: ["ulanyjy ady"], habar: "Gerekli"});

eger (data.satisfaction> = 4 &&! data.positiveFeedback) {ctx.addIssue ({kody: "adaty", ýol: ["positiveFeedback"], habar: "Halaýan zadyňyzy paýlaşmagyňyzy haýyş edýäris"}); }

eger (data.satisfaction <= 2 &&! data.improvementFeedback) {ctx.addIssue ({kody: "adaty", ýol:["improvementFeedback"], habar: "Näme gowulaşdyrmalydygyny aýdyň"}); }});

eksport görnüşi FormData = z.infer ;

Ulanyjy adynyň we parolynyň şertli talap edilýändigine garamazdan islege bagly () görnüşinde ýazylýandygyna üns beriň, sebäbi Zodyň görnüşli shemasy meýdanlar möhüm bolanda düzgünleri däl-de, obýektiň görnüşini suratlandyrýar. Şertli talap, görnüşi tassyklanandan soň işleýän we doly obýekte girip bilýän superRefine-de ýaşamaly. Bu aýralyk kemçilik däl; gural üçin niýetlenen zat: superRefine, shema gurluşynyň özünde beýan edip bolmaýan mahaly meýdan logikasynyň gidýän ýeri. Bu ýerde bellemeli zat, bu shemanyň aňlatmaýan zady. Sahypalar düşünjesi, haýsy meýdanlarda haýsy nokatda görünýändigi we nawigasiýa düşünjesi ýok. Bularyň hemmesi başga bir ýerde ýaşar. Form komponenti

import "useForm, useWatch" "react-hook-form" -dan; "@ hookform / resolvers / zod" -dan import {zodResolver import; import

const STEPS = ["jikme-jiklikler", "sargyt", "hasap", "gözden geçirmek"];

OrderPayload = FormData & {jemi: san; salgyt: san; jemi: san};

eksport funksiýasy RHFMultiStepForm () {const [ädim, setStep] = useState (0);

const mutasiýa = useMutation ({ mutationFn: async (ýük göteriji: OrderPayload) => { const res = almaga garaşyň ("/ api / sargytlar", { usuly: "POST", sözbaşylar: {"Mazmun görnüşi": "programma / json"}, bedeni: JSON.stringify (ýük göteriji), }); eger (! res.ok) täze roralňyşlyk taşlasa ("Iberilmedi"); res.json (); }, });

const {hasaba almak, gözegçilik etmek, dolandyrmakSubmit, formState: {ýalňyşlar},} = useForm ({çözüji: zodResolver (formSchema), defaultValues: {baha: 0, mukdar: 1, salgyt bahasy: 0.1, kanagatlanma: 3, hasaby: "" ok ",},}); const bahasy = useWatch ({gözegçilik, ady: "baha"}); const mukdary = useWatch ({gözegçilik, ady: "mukdar"}); const taxRate = useWatch ({gözegçilik, ady: "taxRate"}); const hasAccount = useWatch ({gözegçilik, ady: "hasAccount"}); const kanagat = useWatch ({gözegçilik, ady: "kanagat"}); const subtotal = useMemo (() => (baha ?? 0) * (mukdar ?? 1), [baha, mukdar]); const salgyt = useMemo (() => subtotal * (taxRate ?? 0), [subtotal, taxRate]); const jemi = useMemo (() => jemi + salgyt, [jemi, salgyt]); const onSubmit = (maglumatlar: FormData) => mutation.mutate ({... maglumatlar, jemi, salgyt, jemi}); const showSubmit = (ädim === 2 && jemi <100) || (ädim === 3 && jemi> = 100)

yzyna gaýdyp geliň

{ädim === 1 && (<> 10%

Subtotal: {subtotal}
Salgyt: {salgyt}
Jemi: {jemi}
)}

{ädim === 2 && (<> Hawa

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

{kanagatlanma> = 4 && (