React Y Next.js nisqapi Formas Dinámicas nisqakunata ruway

By Web Design · · 14 min read · 884 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
React Y Next.js nisqapi Formas Dinámicas nisqakunata ruway

Kay qillqasqaqa SurveyJS nisqap yanapasqanmi Kanmi huk yuyay modelo aswan React ruwaqkuna rakinakunku mana hayk’aqpas kallpawan rimaspa. Chay formakuna sapa kuti componentekuna kananku. Kayqa niyta munan huk pila kayhinata:

React Hook Formulario llaqta estadopaq (aslla re-renders, ergonómico campo registro, interacción imperativa). Zod chiqaqchaypaq (yaykusqa chiqan kay, lindero chiqaqchay, laya-mana manchay t'aqwiy). React Tapuy qhipa kaqpaq: apachiy, wakmanta kallpachakuy, waqaychay, sirwiq tinkiynin, chaymanta wakkuna.

Hinallataq aswan achka formulariokunapaq — pantallakuna yaykuyniykipaq, churana p'anqakunaykipaq, CRUD modalesniykipaq — kay chiqamanta allinta llamkan. Sapa p’anqa llamk’ayninta ruwan, ch’uyata ruwanku, chaymanta chiqamanta ruruykita t’aqaq partekunaman puriyta atikunki. Ichaqa sapa kuti, huk formularioqa imakunatapas huñuyta qallarikun imaynan rikuy kamachikuykuna ñawpaq kutichiykunamanta hapipakuq, utaq hurqusqa chanikuna kimsa chakrakunapi cascada hina. Ichapas llapan p'anqakunatapas saltanapaq utaq rikuchisqa kanan huk puriq llapanpi hapipakuspa. Ñawpaq condicionalta huk useWatch kaqwan chaymanta huk inline rama kaqwan ruwanki, chaytaq allinmi. Chaymantataq huk. Chaymanta superRefine kaqman chayachkanki chakasqa pampa kamachiykunata codificananpaq mayqinkunatachus Zod esquemayki mana normal ñanpi rikuchiyta atinchu. Chaymanta, paso puriyqa negocio lógica fugayta qallarikun. Mayninpi, ima ruwasqaykita qhawanki chaymanta reparanki formulario manaña chiqamanta UI kaqta. Aswan huk tanteay ruwaymi, chaymanta componente sach’a maypichus waqaychasqayki chayllapi kachkan. Kaypin yuyaykuni React nisqapi formakunapaq yuyay modelo p’akikun, cheqaqtapunitaqmi mana pipas huchanchu. RHF + Zod pilaqa ancha allinmi imapaq ruwasqa kasqanmanta. Chay asuntoqa, tendenciaykuqa chayta llamk’achiyta munanchik, maypichus abstraccionesnin chay sasachakuywan tupan chay puntomanta, imaraykuchus chay alternativaqa wakjina yuyayta munan formakunamanta tukuyninpi. Kay qillqasqaqa chay alternativamantam rimachkan. Kayta rikuchinapaq, iskay kutita kikin achka llamkana formulariota ruwasaqku:

React Hook Form + Zod nisqawan React Query nisqaman alambrasqa apachinapaq, SurveyJS kaqwan, mayqinchus huk formulariota willay hina qhawan — huk sanu JSON esquema — aswan huk componente sach'a hina.

Kikin mañakuykuna, kikin condicional lógica, kikin API waqyay tukukuypi. Chaymantaqa allinta mapapi ruwasaqku imakunachus kuyusqa chaymanta imakuna qhipakusqanmanta, chanta juk ruwaypaq ñanta churasaqku mayqin modelotachus llamk’achinaykita, mayk’aqchus llamk’achinaykipaq. Chay formulario ruwasqaykuqa:

Kay formularioqa 4 llamkanayuq flujota llamk'achinqa: 1 kaq phatma: Detalles

Ñawpaq suti (necesario), . Correo electrónico (necesario, formato valido).

2 kaq phatma: Kamachiy

Unidadpa chanin, . Achka kaynin, . Tasa tributaria, 1.1. Derivado: 1.1. Subtotal, . Impuesto, . Llapan.

3 kaq phatma: Cuenta & Retroalimentación

¿Qanpa cuentan kanchu? (Arí/Mana) Sichus Arí → username + contraseña, iskaynintinmi mañasqa. Sichus Mana → correo electrónico 1 kaqpi huñusqaña.

Satisfacción nisqamanta (1–5) . Sichus ≥ 4 → tapuy “¿Imataq gustasurqanki?” Sichus ≤ 2 → tapuy “¿Imatan allinchasunman?”

4 kaq phatma: Riqsichikuy

Llapan >= 100 kaptinllam rikurin Tukupay apachiy.

Kayqa manan nishutachu. Ichaqa arquitectura nisqapi mana kaqlla kasqankuta sut’inchanapaqmi suficiente. 1 kaq raki: Componente-driven (Forma de Gancho de Reacción + Zod) . Instalación nisqa npm churay react-hook-form zod @hookform/resolvers @tanstack/react-tapukuy

Zod Esquema nisqa Zod esquemawan qallarisun, imaraykuchus chaypiqa aswanta formap rikch’ayninqa takyasqa kachkan. Ñawpaq iskay llamkanakunapaq — sapalla willaykunapaq chaymanta kamachiy yaykuykunapaq — tukuy imapas chiqan kachkan: mañasqa watiqakuna, yupaykuna aswan pisi kaqwan, chaymanta huk enum kaqwan. Chay interesante parteqa qallarikunmi kamachikuy condicional nisqakunata rimayta munaspayki.

"zod" nisqamanta { z } nisqa apamuy;

export const formSchema = z.object({ ñawpaqSuti: z.string().min(1, "Munasqa"), correo electrónico: z.string().email("Mana allin correo electrónico"), chanin: z.yupay().min(0), achka: z.yupay().min(1), taxRate: z.number(), hasAccount: z.enum(["Arí", "Mana"]), username: z.string ().akllasqa (), contraseña: z.string ().akllasqa (), satisfacción: z.yupay ().min (1).max (5), positivoRetroalimentación: z.string ().akllasqa (), allinchayRetroalimentación: z.string ().akllasqa (),}).superRefine ((datos, ctx) => { sichus (datos.hasAccount === "Arí") { sichus .

if (data.satisfaction >= 4 && !data.positiveFeedback) { ctx.addIssue({ codigo: "costumbre", ñan: ["positiveFeedback"], willakuy: "Ama hina kaspa, gustasqaykita rakiy" }); } .

if (datos.satisfacción <= 2 && !datos.allinchayRetroalimentación) { ctx.addIssue({ código: "sapanchasqa", ñan:["improvementFeedback"], willakuy: "Ama hina kaspa, willawayku ima allinchanapaq" }); }});

hawaman apachiy laya FormData = z.infer;

Reparay username chaymanta contraseña opcional() hina qillqasqa kachkanku condicionalmente mañasqa kaptinkupas imaraykuchus Zod’s tipo-nivel esquema objetopa rikchayninta willan, mana kamachiykunatachu kamachin mayk’aqchus chakrakuna importante kanku. Condicional mañakuyqa superRefine ukhupi kawsanan tiyan, mayqinchus rikch'a chiqaqchasqa kaptin purin chaymanta hunt'asqa objetoman yaykuyniyuq. Chay t’aqanakuyqa manan pantaychu; chaylla imapaqchus yanapakuy ruwasqa kachkan: superRefine maymanchus cruzada-campo lógica rin mayk’aqchus mana kikin esquema estructurapi rikuchiyta atikunmanchu. Kaypipas reparanapaqmi, kay esquema mana rikuchisqanmi. Manataqmi p'anqakunamanta hamut'ayniyuqchu, manam mayqin chakrakuna maypi rikukuq kasqanmanta hamut'ayniyuqchu, manataqmi puriymanta yuyayniyuqchu. Tukuy chaykunam huklawpi kawsanqa. Formulario Componente nisqa

import { useForm, useWatch } "react-hook-form" kaqmanta;import { zodResolver } kaqmanta "@hookform/resolvers/zod" kaqmanta;import { useMutation } kaqmanta "@tanstack/react-query" kaqmanta;import { useState, useMemo } kaqmanta "react" kaqmanta;import { formSchema, type FormData } kaqmanta "./schema" kaqmanta;

const STEPS = ["detalles", "orden", "cuenta", "qhaway"];

tipo OrderPayload = FormularioData & { subtotal: yupay; impuesto: yupay; llapan: yupay };

hawaman apachiy ruway RHFMultiStepForm () { const [paso, setStep] = Estadota llamk'achiy (0);

const mutación = llamk'achiyMutación ({ mutationFn: async (carga útil: Carga de pedido) => { const res = suyay apamuy ("/api/kamachiykuna", { método: "POST", . umalliqkuna: { "Contenido-Tipo": "aplicación/json" }, kurku: JSON.stringify (carga útil), . }); if (!res.ok) throw new Error("Mana apachiyta atirqanichu"); kutichiy res.json (); }, . });

const { registro, control, handleSubmit, formState: { pantaykuna }, } = useForm({ allichaq: zodResolver (formSchema), defaultValues: { chanin: 0, achka: 1, impuestoRate: 0.1, satisfacción: 3, hasAccount: "Mana", }, }); const chanin = useWatch ({ kamachiy, suti: "precio" }); const achka = useWatch ({ kamachiy, suti: "achka" }); const taxRate = useWatch ({ kamachiy, suti: "taxRate" }); const cuentayuq = userWatch ({ kamachiy, suti: "Cuentayuq" }); const kusikuy = useWatch ({ kamachiy, suti: "kusikuy" }); const subtotal = useMemo (() => (precio ?? 0) * (cantidad ?? 1), [precio, cantidad]); const impuesto = useMemo (() => subtotal * (impuesto Tasa ?? 0), [subtotal, impuestoTasa]); const llapan = useMemo (() => subtotal + impuesto, [subtotal, impuesto]); const onSubmit = (willakuy: FormData) => mutation.mutate ({ ...willakuy, subtotal, impuesto, llapan }); const rikuchiyKachay = (paso === 2 && llapan < 100) || (paso === 3 && llapan >= 100)

return (

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

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

Uchuy llapan: {subtotal}
Impuesto: {tax}
Llapan: {tupallan}
)}

{paso === 2 && ( <> Arí Mana

{hasAccount === "Arí" && ( <> )}

{satisfacción >= 4 && (