Nkan yii jẹ onigbọwọ nipasẹ SurveyJS Awoṣe opolo kan wa pupọ julọ awọn olupilẹṣẹ React pin laisi jiroro rẹ rara. Awọn fọọmu yẹn nigbagbogbo yẹ lati jẹ awọn paati. Eyi tumọ si akopọ bi:
Fọọmu kio fesi fun ipinlẹ agbegbe (awọn atunṣe ti o kere ju, iforukọsilẹ aaye ergonomic, ibaraenisepo pataki). Zod fun afọwọsi (atunse igbewọle, afọwọsi aala, iru-itupalẹ ailewu). Ibeere fesi fun ẹhin: ifakalẹ, awọn igbiyanju, caching, amuṣiṣẹpọ olupin, ati bẹbẹ lọ.
Ati fun ọpọlọpọ awọn fọọmu - awọn iboju iwọle rẹ, awọn oju-iwe eto rẹ, awọn awoṣe CRUD rẹ - eyi ṣiṣẹ daradara gaan. Ẹyọ kọọkan n ṣe iṣẹ rẹ, wọn ṣajọ ni mimọ, ati pe o le lọ si awọn apakan ti ohun elo rẹ ti o ṣe iyatọ ọja rẹ gaan. Ṣugbọn ni gbogbo igba ni igba diẹ, fọọmu kan bẹrẹ ikojọpọ awọn nkan bii awọn ofin hihan ti o dale lori awọn idahun iṣaaju, tabi awọn iye ti a mu jade ti o ka nipasẹ awọn aaye mẹta. Boya paapaa gbogbo awọn oju-iwe ti o yẹ ki o fo tabi han da lori apapọ nṣiṣẹ. O mu ipo akọkọ pẹlu useWatch ati ẹka inline, eyiti o dara. Lẹhinna miiran. Lẹhinna o n de ọdọ SuperRefine lati ṣe koodu awọn ofin aaye-agbelebu ti eto Zod rẹ ko le ṣalaye ni ọna deede. Lẹhinna, lilọ kiri ni igbesẹ bẹrẹ jijo ọgbọn iṣowo. Ni aaye kan, o wo ohun ti o ti kọ ati rii pe fọọmu naa kii ṣe UI gaan mọ. O jẹ diẹ sii ti ilana ipinnu, ati igi paati jẹ o kan nibiti o ti ṣẹlẹ lati tọju rẹ. Eyi ni ibiti Mo ro pe awoṣe ọpọlọ fun awọn fọọmu ni React fọ, ati pe kii ṣe ẹbi gaan. Iṣakojọpọ RHF + Zod dara julọ ni ohun ti o ṣe apẹrẹ fun. Ọrọ naa ni pe a ṣọ lati tọju lilo rẹ kọja aaye nibiti awọn abstractions rẹ baamu iṣoro naa nitori yiyan nilo ọna ti o yatọ ti ironu nipa awọn fọọmu patapata. Nkan yii jẹ nipa yiyan yẹn. Lati ṣe afihan eyi, a yoo kọ fọọmu-igbesẹ pupọ kanna ni ẹẹmeji:
Pẹlu Fọọmu Hook React + Zod ti firanṣẹ lati Ibeere Idahun fun ifakalẹ, Pẹlu SurveyJS, eyiti o tọju fọọmu kan bi data - ero JSON ti o rọrun - kuku ju igi paati kan.
Awọn ibeere kanna, ọgbọn ipo kanna, ipe API kanna ni ipari. Lẹhinna a yoo ya aworan gangan ohun ti o gbe ati ohun ti o duro, ati ṣeto ọna ti o wulo lati pinnu iru awoṣe ti o yẹ ki o lo, ati nigbawo. Fọọmu ti a n kọ:
Fọọmu yii yoo lo sisan-igbesẹ mẹrin: Igbesẹ 1: Awọn alaye
Orukọ akọkọ (beere fun), Imeeli (beere, ọna kika to wulo).
Igbesẹ 2: Paṣẹ
Iye owo ẹyọkan, Iwọn, Oṣuwọn owo-ori, Ti ari: Lapapọ, Owo-ori, Lapapọ.
Igbesẹ 3: Akọọlẹ & Esi
Ṣe o ni akọọlẹ kan? (Bẹẹni/Bẹẹkọ) Ti Bẹẹni → orukọ olumulo + ọrọ igbaniwọle, mejeeji nilo. Ti Bẹẹkọ → imeeli ti gba tẹlẹ ni igbesẹ 1.
Iwọn itelorun (1-5) Ti ≥ 4 → beere "Kini o fẹran?" Ti ≤ 2 → beere “Kini a le mu dara si?”
Igbesẹ 4: Atunwo
Nikan han ti lapapọ>=100 Ifakalẹ ipari.
Eyi kii ṣe iwọn. Ṣugbọn o to lati ṣafihan awọn iyatọ ti ayaworan. Apá 1: Ìwakọ paati (Fọọmu Hook Fesi + Zod) Fifi sori ẹrọ npm fi sori ẹrọ react-hook-form zod @hookform/resolvers @tanstack/react-query
Eto Zod Jẹ ki a bẹrẹ pẹlu eto Zod, nitori pe igbagbogbo ni ibi ti apẹrẹ ti fọọmu naa ti fi idi mulẹ. Fun awọn igbesẹ meji akọkọ - awọn alaye ti ara ẹni ati awọn igbewọle aṣẹ - ohun gbogbo jẹ taara: awọn okun ti a beere, awọn nọmba pẹlu awọn o kere ju, ati enum kan. Awọn awon apakan bẹrẹ nigbati o ba gbiyanju lati han ni àídájú awọn ofin.
gbe wọle {z} lati "zod";
okeere const formSchema = z.ohun ({ firstName: z.string () z.string ().iyan (), ọrọigbaniwọle: z.string ().iyan (), itelorun: z.number () .min (1) .max (5), positiveFeedback: z.string () .iyan (), ilọsiwajuFeedback: z.string ().iyan (),}).superRefine ((data, ctx) => {ti o ba ti (data.hasAccount) {==" orukọ === "data. ctx.addIssue ({koodu: "aṣa", ọna: ["orukọ olumulo"], ifiranṣẹ: "Ti beere" });
ti (data.satisfaction >= 4 && !data.positiveFeedback) {ctx.addIssue ({koodu: "aṣa", ọna: ["positiveFeedback"], ifiranṣẹ: "Jọwọ pin ohun ti o fẹran"}); }
ti (data.satisfaction <= 2 && !data.improvementFeedback) {ctx.addIssue({koodu: "aṣa", ọna:["improvementFeedback"], ifiranṣẹ: "Jọwọ sọ fun wa kini lati ṣe ilọsiwaju"}); }});
okeere iru FormData = z.infer
Ṣe akiyesi pe orukọ olumulo ati ọrọ igbaniwọle ti wa ni titẹ bi iyan () botilẹjẹpe wọn nilo ni majemu nitori eto iru-ipele Zod ṣe apejuwe apẹrẹ ohun naa, kii ṣe awọn ofin ti n ṣakoso nigbati awọn aaye ṣe pataki. Ibeere majemu ni lati gbe inu superRefine, eyiti o ṣiṣẹ lẹhin apẹrẹ ti a fọwọsi ati ni iwọle si ohun kikun. Iyapa yẹn kii ṣe abawọn; o kan jẹ ohun ti a ṣe apẹrẹ ọpa fun: superRefine ni ibi ti ọgbọn-aaye agbelebu n lọ nigbati ko le ṣe afihan ni eto eto ara rẹ. Ohun ti o tun ṣe akiyesi nibi ni ohun ti ero yii ko ṣalaye. Ko ni ero ti awọn oju-iwe, ko si imọran ti awọn aaye wo ni o han ni aaye wo, ko si si imọran ti lilọ kiri. Gbogbo eyi yoo gbe ni ibomiiran. Ẹya Fọọmu
gbe wọle {useForm, useWatch} lati "react-hook-form"; gbe wọle {zodResolver} lati "@hookform/resolvers/zod"; gbe wọle {useMutation } lati "@tanstack/react-query"; gbe wọle {useState, useMemo } lati "react"/gbewọle; gbe wọle Fun "formSchema,}
const STEPS = ["alaye", "ibere", "iroyin", "atunyẹwo"];
iru OrderPayload = FormData & {subtotal: nọmba; ori: nọmba; lapapọ: nọmba};
iṣẹ okeere RHFMultiStepForm () {const [igbesẹ, setStep] = useState (0);
const iyipada = lilo iyipada ({ iyipadaFn: async (ẹrù isanwo: OrderPayload) => { const res = duro de ("/api/orders", { ọna: "POST", awọn akọle: {"Akoonu-Iru": "application/json" }, ara: JSON.stringify (payload), }); ti o ba ti (!res.ok) jabọ titun aṣiṣe ("Kuna lati fi"); pada res.json (); }, });
const {forukọsilẹ, iṣakoso, handleSubmit, formState: {aṣiṣe },} = useForm
pada (
{igbese === 1 && ( <>
{igbese === 2 && ( <>
{hasAccount === "Bẹẹni" && ( <> )}
{ itelorun >= 4 && ( )}
{itẹlọrun <= 2 && ( )} )}
{igbese === 3 && lapapọ>= 100 &&
Wo Pen SurveyJS-03-RHF [forked] nipasẹ sixthextinction. Ohun pupọ n ṣẹlẹ nibi, ati pe o tọ lati fa fifalẹ lati ṣe akiyesi ibiti awọn nkan ti pari.
Awọn iye ti ari - lapapọ, owo-ori, lapapọ - jẹ iṣiro ninu paati nipasẹ liloWatch ati useMemo nitori wọn dale awọn iye aaye laaye ati pe ko si aaye adayeba miiran fun wọn. Awọn ofin hihan fun orukọ olumulo, ọrọ igbaniwọle, esi rere, ati ilọsiwajuIdahun n gbe ni JSX gẹgẹbi awọn ipo laini. Imọye-igbesẹ-ọrọ – oju-iwe atunyẹwo ti n farahan nikan nigbati apapọ>= 100 — ti wa ni ifibọ sinu oniyipada Firanṣẹ ati ipo imuṣe ni igbesẹ 3. Lilọ kiri funrararẹ jẹ iṣiro liloState kan ti a n pọ si pẹlu ọwọ. Ìbéèrè fesi mu awọn atunwo, caching, ati invalidation. Fọọmu naa kan pe mutation.mutate pẹlu data ti a fọwọsi.
Ko si ọkan ninu eyi ti ko tọ, fun ọkan. Eleyi jẹ ṣi idiomatic React, ati awọn paati jẹ ohun išẹ o ṣeun re bi RHF ya sọtọ tun-renders. Ṣugbọn ti o ba fi eyi ranṣẹ si ẹnikan ti ko kọ ọ ki o beere lọwọ wọn lati ṣalaye labẹ awọn ipo wo ni oju-iwe atunyẹwo yoo han, wọn yoo ni lati wa kakiri nipasẹ showSubmit, ipo 3 mu ipo, ati ọgbọn bọtini nav - awọn aaye ọtọtọ mẹta - lati tun ṣe ofin kan ti o le ti sọ ni ila kan. Fọọmu naa ṣiṣẹ, bẹẹni, ṣugbọn ihuwasi ko ṣe akiyesi gaan bi eto kan. O ni lati ṣe ni ọpọlọ. Ni pataki julọ, iyipada rẹ nilo ilowosi imọ-ẹrọ. Paapaa tweak kekere kan, bii ṣiṣatunṣe nigbati igbesẹ atunyẹwo ba han, tumọ si ṣiṣatunṣe paati, imudara imudojuiwọn, ṣiṣi ibeere fa, nduro fun atunyẹwo, ati imuṣiṣẹ lẹẹkansi. Apá 2: Iṣeto-Iwakọ (SurveyJS) Bayi jẹ ki a kọ ṣiṣan kanna nipa lilo ero kan. Fifi sori ẹrọ npm fi iwadi-mojuto iwadi-react-ui @tanstack/react-query
Survey-coreẸnjini asiko asiko ti o ni ominira ti iru ẹrọ ti o ni iwe-aṣẹ MIT ti o fun ni agbara ẹda ti SurveyJS - apakan ti a bikita nibi. O gba eto JSON kan, kọ awoṣe inu lati ọdọ rẹ, ati mu ohun gbogbo ti yoo ṣe bibẹẹkọ gbe ninu paati React rẹ: iṣiro awọn ikosile hihan, ṣiṣe iṣiro awọn iye ti a mu, iṣakoso ipo oju-iwe, afọwọsi ipasẹ, ati pinnu kini “pipe” tumọ si fifun iru awọn oju-iwe wo ni o han.
Survey-react-uiThe UI / Layer Rendering ti o so awoṣe yẹn lati Fesi. O jẹ pataki ni pataki
Papọ, wọn fun ọ ni iṣẹ-ṣiṣe ni kikun, akoko asiko fọọmu oju-iwe pupọ laisi kikọ laini kan ti ṣiṣan iṣakoso. Ọna kika eto funrararẹ jẹ, bi a ti sọ tẹlẹ, JSON kan - ko si DSL tabi ohunkohun ti ohun-ini. O le ṣe inline rẹ, gbe wọle lati faili kan, mu lati API kan, tabi tọju rẹ sinu iwe data data ki o mu omi ni akoko asiko. Fọọmu Kanna, Bi Data Eyi ni fọọmu kanna, akoko yii ṣafihan bi nkan JSON kan. Eto naa ṣalaye ohun gbogbo: eto, afọwọsi, awọn ofin hihan, awọn iṣiro ti a mu, lilọ kiri oju-iwe — ati fi ọwọ si Awoṣe ti o ṣe iṣiro rẹ ni akoko asiko. Eyi ni ohun ti iyẹn dabi ni kikun:
Export const SurveySchema = {akọle: "Order Flow", showProgressBar: "oke", awọn oju-iwe: [ {orukọ: "awọn alaye", awọn eroja: [ {type: "text", name: "firstName", isRequired: true }, {type: "text", name: "imeeli", inputType: "imemail", isRequired: "otitọ, awọn olufọwọsi" imeeli: [{} ]}, {orukọ: "ibere", awọn eroja: [ {iru: "ọrọ", orukọ: "owo", inputType: "nọmba", defaultValue: 0 }, {type: "text", name: " quantity", inputType: "nọmba", defaultValue: 1 }, {type:" dropdown",orukọ: "TaxRate", defaultValue: 0.1, awọn aṣayan: [ {iye: 0.05, ọrọ: "5%"}, {iye: 0.1, ọrọ: "10%"}, {iye: 0.15, ọrọ:"15%"} ] , { Iru: "ikosile", orukọ: "subntital": {price ikosile: {}} "expression", name: "tax", ikosile: "{subtotal} {taxRate}"}, {iru: "expression", oruko: "lapapọ", ikosile: "{subtotal} + {tax}" } ] }, {oruko: "account", eroja: [ {type: "rediogroup", name: "hasAccount",'s choice: {"Ko si orukọ:" "username", visualIf: "{hasAccount} = 'Bẹẹni'", isRequired: true }, {type: "text", name: "password", inputType: "password", visualIf: "{hasAccount} = 'Bẹẹni'", isRequired: otitọ, awọn olufọwọsi: [{ type: "text", minLength: " type: 6}] character {6}] oruko: " itelorun ", rateMin: 1, rateMax: 5 }, {type: "comment", name: "positiveFeedback", visualIf: "{satisfaction} >= 4" }, {type: "comment", name: "provementFeedback", hanIf:" {oruko itelorun} <= 2" } ]}, {view:} 100", eroja: []}];
Ṣe afiwe eyi si ẹya RHF fun iṣẹju kan.
Àkọsílẹ SuperRefine ti o nilo orukọ olumulo ati ọrọ igbaniwọle ni ipo ti lọ. visualIf: "{hasAccount} = 'Bẹẹni'" ni idapo pelu isRequired: otitọ mu awọn ifiyesi mejeeji papọ, lori aaye funrararẹ, nibiti o ti nireti lati rii wọn. UseWatch + useMemo pq ti o ṣe iṣiro ipin-ipin, owo-ori, ati lapapọ ti rọpo nipasẹ awọn aaye ikosile mẹta ti o tọka si ara wọn nipasẹ orukọ. Ipo oju-iwe atunyẹwo, eyiti o wa ninu ẹya RHF jẹ atunṣe nikan nipasẹ wiwa kakiri nipasẹ showSubmit, igbesẹ 3 funni ni ẹka. Ati nipari, awọn nav bọtini kannaa jẹ kan nikan hanIf ohun ini lori iwe ohun.
Kanna kannaa jẹ nibẹ. O kan pe eto naa fun ni aaye lati gbe ni ibiti o ti han ni ipinya, dipo ki o tan kaakiri paati naa. Paapaa, ṣakiyesi pe ero naa nlo iru: 'ikosile' fun apapọ, owo-ori, ati lapapọ. Ikosile jẹ kika-nikan ati lo ni pataki lati ṣe afihan awọn iye iṣiro. SurveyJS tun ṣe atilẹyin iru: 'html' fun akoonu aimi, ṣugbọn fun awọn iye iṣiro, ikosile jẹ yiyan ti o tọ. Bayi fun ẹgbẹ React. Rendering Ati Ifakalẹ Rọrun pupọ. Waya lori Pari si API rẹ ni ọna kanna - nipasẹ liloMutation tabi gbejade lasan:
gbe wọle {useState, useEffect, useRef} lati "react"; gbe wọle {useMutation } lati "@tanstack/react-query"; gbe wọle {Awoṣe } lati "iwadi-mojuto"; gbe wọle {Iwadi } lati "iwadi-react-ui"; gbe wọle "iwadi-mojuto/ssss-core;ccore.
iṣẹ okeere SurveyForm () {const [awoṣe] = useState (() => Awoṣe tuntun (surveySchema));
const iyipada = lilo iyipada ({ iyipadaFn: async (data) => { const res = duro de ("/api/orders", { ọna: "POST", awọn akọle: {"Akoonu-Iru": "application/json" }, ara: JSON.stringify (data), }); ti o ba ti (!res.ok) jabọ titun aṣiṣe ("Kuna lati fi"); pada res.json (); }, });
const mutationRef = useRef(iyipada); mutationRef.current = iyipada; useEffect (() => {const olutọju = (olufiranṣẹ) => mutationRef.current.mutate (sender.data); model.onComplete.add (handler); pada () => model.onComplete.remove (olutọju);}, [awoṣe]); // Ref yago fun oluṣakoso tun-forukọsilẹ ni gbogbo iṣẹ (awọn iyipada idanimọ ohun iyipada)
pada (
<>
Wo Pen SurveyJS-03-SurveyJS [forked] nipa sixthextinction.
on Pari ina nigbati olumulo ba de opin oju-iwe ti o han kẹhin. Nitorinaa ti lapapọ ko ba kọja 100 ati pe oju-iwe atunyẹwo naa ti fo, o tun ina ni deede nitori SurveyJS ṣe iṣiro hihan ṣaaju ṣiṣe ipinnu kini “oju-iwe ikẹhin” tumọ si. Lẹhinna, sender.data ni gbogbo awọn idahun pẹlu awọn iye iṣiro (apapọ, owo-ori, lapapọ) gẹgẹbi awọn aaye kilasi akọkọ, nitorinaa isanwo API jẹ aami si ohun ti ẹya RHF pejọ pẹlu ọwọ ni Firanṣẹ. AwọnIlana iyipadaRef jẹ ọkan kanna ti o fẹ de ibikibi ti o nilo oluṣakoso iṣẹlẹ iduroṣinṣin lori iye ti o yipada lori gbogbo ṣiṣe - ko si nkankan SurveyJS-kan pato nipa rẹ.
Awọn paati React ko ni awọn ọgbọn iṣowo eyikeyi ninu rara. Ko si useWatch, ko si JSX majemu, ko si counter igbese, ko si liloMemo pq, ko si superRefine. React n ṣe ohun ti o dara ni gaan ni: jigbe paati kan ati sisọ si ipe API kan. Ohun ti Gbe Jade Ninu Reti?
Ifarabalẹ RHF akopọ IwadiJS Hihan JSX ẹka hanIf Awọn iye ti ari loWatch / loMemo ikosile Cross-oko ofin SuperRefine Awọn ipo eto Lilọ kiri ipinle igbese Oju-iwe hanIf Ipo ofin Pinpin kọja awọn faili Aarin ni eto
Ohun ti o duro ni React jẹ ifilelẹ, iselona, wiwi ifisilẹ, ati iṣọpọ ohun elo, eyiti o ni lati sọ, awọn nkan React jẹ apẹrẹ fun gaan. Ohun gbogbo miiran ti gbe sinu ero, ati nitori pe ero naa jẹ nkan JSON nikan, o le wa ni ipamọ sinu ibi ipamọ data, ti ikede ni ominira ti koodu ohun elo rẹ, tabi ṣatunkọ nipasẹ ohun elo inu laisi nilo imuṣiṣẹ. Oluṣakoso ọja ti o nilo lati yi iloro ti o nfa oju-iwe atunyẹwo le ṣe laisi fifọwọkan paati naa. Iyẹn jẹ iyatọ iṣẹ ṣiṣe ti o nilari fun awọn ẹgbẹ nibiti ihuwasi fọọmu ti nwaye nigbagbogbo ati pe kii ṣe nigbagbogbo nipasẹ awọn onimọ-ẹrọ. Nigbawo Lati Lo Ọna kọọkan? Eyi ni ofin atanpako to dara ti o ṣiṣẹ fun mi: fojuinu piparẹ fọọmu naa patapata. Kini iwọ yoo padanu?
Ti o ba jẹ awọn iboju, o fẹ awọn fọọmu ti o wa ni paati. Ti o ba jẹ ọgbọn iṣowo, bii awọn ala, awọn ofin ẹka, ati awọn ibeere ipo ti o fi koodu pa awọn ipinnu gidi, o fẹ ẹrọ ero.
Bakanna, ti awọn ayipada ti n bọ ni ọna rẹ jẹ pupọ julọ nipa awọn aami, awọn aaye, ati ifilelẹ, RHF yoo ṣe iranṣẹ fun ọ daradara. Ti wọn ba jẹ nipa awọn ipo, awọn abajade, ati awọn ofin ti awọn ops rẹ tabi ẹgbẹ aṣofin le nilo lati ṣatunṣe ni ọsan ọjọ Tuesday kan laisi fifisilẹ tikẹti kan, awoṣe apẹrẹ pẹlu SurveyJS ni ibamu ooto diẹ sii. Awọn ọna meji wọnyi ko ni idije gidi pẹlu ara wọn. Wọn koju awọn ipele oriṣiriṣi ti awọn iṣoro, ati aṣiṣe ti o yẹ ki o yago fun ni aiṣedeede abstraction si iwuwo ti oye - ṣiṣe itọju eto ofin bi paati nitori iyẹn ni ohun elo ti o faramọ, tabi de ọdọ ẹrọ eto imulo nitori fọọmu kan dagba si awọn igbesẹ mẹta ati gba aaye ipo. Fọọmu ti a kọ si ibi joko nitosi aala mọọmọ, eka to lati fi iyatọ han ṣugbọn kii ṣe iwọn tobẹẹ ti afiwera kan lara rigged. Pupọ julọ awọn fọọmu gidi ti o ti ni aibikita ninu koodu koodu rẹ jasi joko nitosi aala kanna, ati pe ibeere naa nigbagbogbo jẹ boya ẹnikan ti daruko ohun ti wọn jẹ gaan. Lo Fọọmu Hook React + Zod nigbati:
Awọn fọọmu ti wa ni CRUD-Oorun; Kannaa ni aijinile ati UI-ìṣó; Engineers ara gbogbo iwa; Ẹhin jẹ orisun otitọ.
Lo SurveyJS nigbati:
Awọn fọọmu ṣe koodu awọn ipinnu iṣowo; Awọn ofin wa ni ominira ti UI; Logbon gbọdọ jẹ han, auditable, tabi ti ikede; Awọn ti kii ṣe ẹlẹrọ ni ipa ihuwasi; Fọọmu kanna gbọdọ ṣiṣẹ kọja awọn iwaju iwaju pupọ.
