Tá an t-alt seo urraithe ag SurveyJS Tá múnla meabhrach ann a roinneann an chuid is mó d’fhorbróirí React gan é a phlé os ard riamh. Go bhfuil foirmeacha ceaptha i gcónaí a bheith comhpháirteanna. Ciallaíonn sé seo cruach mar:
Foirm Hook React don stát áitiúil (ath-rindreáil íosta, clárú réimse eirgeanamaíochta, idirghníomhú riachtanach). Zod le haghaidh bailíochtaithe (cirt ionchuir, bailíochtú teorann, parsáil cineál-sábháilte). Freagair Iarratas le haghaidh inneall: aighneacht, atriail, taisceadh, sioncronú freastalaí, agus mar sin de.
Agus d'fhormhór mór na bhfoirmeacha - do scáileáin logála isteach, do leathanaigh socruithe, do mhodhanna CRUD - oibríonn sé seo go han-mhaith. Déanann gach píosa a chuid oibre, cumann siad go glan, agus is féidir leat bogadh ar aghaidh go dtí na codanna de d'iarratas a dhéanann idirdhealú iarbhír ar do tháirge. Ach ó am go chéile, tosaíonn foirm ag carnadh rudaí cosúil le rialacha infheictheachta a bhraitheann ar fhreagraí níos luaithe, nó luachanna díorthaithe a ritheann trí réimse. B'fhéidir fiú leathanaigh iomlána ar chóir iad a scipeáil nó a thaispeáint bunaithe ar iomlán reatha. Láimhseálann tú an chéad choinníoll le useWatch agus brainse inlíne, atá ceart go leor. Ansin eile. Ansin tá tú ag iarraidh superRefine chun rialacha tras-réimse a ionchódú nach féidir le do scéimre Zod a chur in iúl ar an ngnáthbhealach. Ansin, tosaíonn loingseoireacht céim ag sceitheadh loighic ghnó. Ag pointe éigin, breathnaíonn tú ar a bhfuil tógtha agat agus tuigeann tú nach UI i ndáiríre an fhoirm a thuilleadh. Is próiseas cinnteoireachta níos mó é, agus is é an crann comhpháirte díreach an áit ar tharla duit é a stóráil. Seo an áit ar dóigh liom go mbrisfidh an tsamhail mheabhrach le haghaidh foirmeacha in React, agus níl an locht ar éinne i ndáiríre. Tá an chairn RHF + Zod ar fheabhas ar an méid a dearadh dó. Is í an tsaincheist ná go bhfuil sé de nós againn leanúint ar aghaidh ag baint úsáide as an bpointe go bhfuil a astarraingtí ag teacht leis an bhfadhb mar go dteastaíonn bealach eile chun smaoineamh ar fhoirmeacha ina n-iomláine. Baineann an t-alt seo leis an rogha eile sin. Chun é seo a thaispeáint, tógfaimid an fhoirm ilchéime chéanna faoi dhó:
Le Foirm Hook React + Zod sreangaithe chun Iarratas a Fhrithghníomh le cur isteach, Le SurveyJS, a dhéileálann le foirm mar shonraí - scéimre JSON simplí - seachas crann comhpháirte.
Ceanglais chéanna, loighic choinníollach céanna, glao API céanna ag an deireadh. Ansin léarscáileoimid go díreach cad a athraíodh agus cad a d’fhan, agus leagfaimid amach bealach praiticiúil chun cinneadh a dhéanamh maidir leis an múnla ba chóir duit a úsáid, agus cathain. An fhoirm atá á tógáil againn:
Úsáidfidh an fhoirm seo sreabhadh 4 chéim: Céim 1: Sonraí
Céadainm (riachtanach), Ríomhphost (riachtanach, formáid bhailí).
Céim 2: Ordú
Praghas aonaid, Cainníocht, Ráta cánach, Díorthaithe: Fo-iomlán, Cáin, Iomlán.
Céim 3: Cuntas & Aiseolas
An bhfuil cuntas agat? (Tá/Níl) Má tá → ainm úsáideora + pasfhocal, tá an dá cheann ag teastáil. Mura bhfuil → ríomhphost bailithe cheana féin i gcéim 1.
Rátáil sásaimh (1–5) Má ≥ 4 → fiafraigh “Cad a thaitin leat?” Má ≤ 2 → fiafraigh “Cad is féidir linn a fheabhsú?”
Céim 4: Athbhreithniú
Ní fheictear ach amháin más é iomlán >= 100 é Aighneacht deiridh.
Níl sé seo an-mhór. Ach is leor é chun difríochtaí ailtireachta a nochtadh. Cuid 1: Comhpháirt-tiomáinte (React Hook Foirm + Zod) Suiteáil npm suiteáil react-hook-form zod @hookform/resolvers @tanstack/react-query
Scéimre Zod Tosaímid leis an scéimre Zod, mar is iondúil gur sin a bhunaítear cruth na foirme. Don chéad dá chéim - sonraí pearsanta agus ionchuir ordaithe - tá gach rud simplí: teaghráin riachtanacha, uimhreacha le híosmhéideanna, agus enum. Tosaíonn an chuid suimiúil nuair a dhéanann tú iarracht na rialacha coinníollach a chur in iúl.
allmhairiú { z } ó "zod";
export const formSchema = z.object({ firstName: z.string().min(1, "Riachtanach"), r-phost: z.string().email("Ríomhphost neamhbhailí"), praghas: z.number().min(0), cainníocht: z.number().min(1), Ráta cánach: z.number(), hasAccount: z.() , , , hasCuntas: z.(op.), (": op.), ([" Ystring) "), ["string name) ), ([" Ystring) "), [" Ystring ("]): pasfhocal: z.string().roghnach(), sásamh: z.number().min(1).max(5), positiveAiseolas: z.string().optional(), improvementFeedback: z.string().roghnach(),}).superRefine((sonraí, ctx) => {más rud é (data.hasAccount === "Tá") {if (!) {más rud é (data.hasAccount === "Tá") { if (!) { . "saincheaptha", cosán: [ "ainm úsáideora"], teachtaireacht: "Riachtanach" }); } más rud é (! data.password || data.password.length < 6) { ctx.addIssue({ cód: "saincheaptha", cosán: ["focal faire"], teachtaireacht: "Íosmhéid 6 carachtair" });
más rud é (data.satisfaction >= 4 && !data.positiveFeedback) { ctx.addIssue({ cód: "custom", cosán: ["dearfachAiseolas"], teachtaireacht: "Comhroinn cad a thaitin leat" }); }
más rud é (data.satisfaction <= 2 && !data.improvementFeedback) { ctx.addIssue({ cód: "saincheaptha", cosán:["feabhsúAiseolas"], teachtaireacht: "Inis dúinn cad ba cheart a fheabhsú" }); }});
cineál easpórtála FormData = z.infer
Tabhair faoi deara go bhfuil an t-ainm úsáideora agus an pasfhocal clóscríofa mar roghnach() cé go bhfuil gá coinníollach leo toisc go gcuireann scéimre cineál-leibhéal Zod síos ar chruth an ruda, ní ar na rialacha a rialaíonn nuair a bhíonn réimsí tábhachtach. Caithfidh an riachtanas coinníollach maireachtáil taobh istigh de superRefine, a ritheann tar éis an cruth a bhailíochtú agus a bhfuil rochtain aige ar an réad iomlán. Ní locht é an scaradh sin; níl ann ach cad chuige a bhfuil an uirlis deartha: is é superRefine an áit a dtéann loighic tras-réimse nuair nach féidir é a chur in iúl sa struchtúr scéimre féin. Rud atá suntasach anseo freisin ná an rud nach gcuireann an scéimre seo in iúl. Níl aon choincheap leathanaigh ann, níl aon choincheap ann faoi na réimsí atá le feiceáil ag an bpointe sin, agus níl aon choincheap loingseoireachta ann. Beidh sé sin go léir beo áit éigin eile. Comhpháirt Fhoirm
iompórtáil { useForm, useWatch } ó "react-hook-form"; allmhairiú { zodResolver } ó "@hookform/resolvers/zod"; allmhairiú { useMutation } ó "@tanstack/react-query"; allmhairiú { useState, useMemo } ó "React"; cineál iompórtáil {formatSemach };
const STEPS = [ "mionsonraí", "ordú", "cuntas", "athbhreithniú"];
type OrderPayload = FormData &{ subtotal: uimhir; cáin: uimhir; iomlán: uimhir };
feidhm easpórtála RHFMultiStepForm() { const [step, setStep] = useState(0);
const mutation = useMutation({ mutationFn: async (pálasta: OrderPayload) => { const res = ag fanacht le fetch ("/api/orduithe", { modh: "POST", ceanntásca: { "Content-Type": "iarratas/json" }, comhlacht: JSON.stringify(pálasta), }); má (!res.ok) caith Earráid nua ("Theip ar chur isteach"); ais res.json(); }, });
const { clárú, rialú, láimhseáilSubmit, formState: { earráidí }, } = úsáidForm
ar ais (
);}Féach an Peann SurveyJS-03-RHF [forked] faoin séú síth. Tá go leor ag tarlú anseo, agus is fiú moilliú a thabhairt faoi deara cá háit ar chríochnaigh rudaí.
Ríomhtar na luachanna díorthaithe - fo-iomlán, cáin, iomlán - sa chomhpháirt trí useWatch agus useMemo toisc go mbraitheann siad ar luachanna réimse beo agus nach bhfuil aon áit nádúrtha eile ann dóibh. Tá na rialacha infheictheachta maidir le hainm úsáideora, pasfhocal, Aiseolas dearfach, agus feabhsú Aiseolas beo i JSX mar choinníollacha inlíne. Tá an loighic scipeála céime — an leathanach athbhreithnithe le feiceáil ach amháin nuair a bhíonn sé san iomlán >= 100 — leabaithe san athróg showSubmit agus an coinníoll rindreála ar chéim 3. Níl sa loingseoireacht féin ach cuntar useState atá á mhéadú againn de láimh. Láimhseálann React Query atriarthaí, taisceadh agus neamhbhailíochtú. Ní thugann an fhoirm ach mutation.mutate le sonraí bailíochtaithe.
Níl aon cheann de seo mícheart, per se. Tá sé seo fós ar nós React, agus tá an chomhpháirt feidhmiúil go leor a bhuíochas leis an gcaoi a n-aonrann RHF ath-renders. Ach dá dtabharfá é seo do dhuine nár scríobh é agus iarr orthu a mhíniú faoi na coinníollacha atá le feiceáil ar an leathanach athbhreithnithe, bheadh orthu lorg trí showSubmit, an coinníoll rindreála chéim 3, agus an loighic cnaipe nascleanúna - trí áit ar leith - chun riail a d'fhéadfaí a lua i líne amháin a athchruthú. Oibríonn an fhoirm, tá, ach ní féidir an iompar a iniúchadh i ndáiríre mar chóras. Caithfear é a fhorghníomhú go meabhrach. Níos tábhachtaí fós, teastaíonn rannpháirtíocht innealtóireachta chun é a athrú. Ciallaíonn fiú tweak beag, cosúil le coigeartú nuair a thaispeánann an chéim athbhreithnithe suas, eagarthóireacht a dhéanamh ar an gcomhpháirt, bailíochtú a nuashonrú, iarratas tarraingt a oscailt, fanacht le hathbhreithniú, agus imscaradh arís. Cuid 2: Scéimreach-tiomáinte (SurveyJS) Anois déanaimis an sreabhadh céanna ag baint úsáide as scéimre. Suiteáil npm install survey-core survey-react-ui @tanstack/react-query
survey-coreAn t-inneall réitithe neamhspleách ardáin atá ceadúnaithe ag MIT a thugann cumhacht do rindreáil fhoirm SurveyJS - an chuid is tábhachtaí dúinn anseo. Tógann sé scéimre JSON, tógann sé samhail inmheánach uaidh, agus láimhseálann sé gach rud a bheadh beo i do chomhpháirt React ar shlí eile: ag déanamh measúnú ar shloinneadh infheictheachta, ag ríomh luachanna díorthaithe, ag bainistiú staid leathanaigh, ag rianú bailíochtaithe, agus ag cinneadh cad a chiallaíonn “iomlán” i bhfianaise na leathanach a taispeánadh i ndáiríre.
survey-react-uiAn Chomhéadain / ciseal rindreála a nascann an tsamhail sin le React. Go bunúsach is comhpháirt
Le chéile, tugann siad am rite foirm il-leathanaigh atá lánfheidhmiúil duit gan aon líne shreabhadh rialaithe a scríobh. Níl san fhormáid scéimre féin, mar a dúradh cheana, ach JSON — gan DSL nó aon rud dílsithe. Is féidir leat é a inlíneáil, é a allmhairiú ó chomhad, é a fháil ó API, nó é a stóráil i gcolún bunachar sonraí agus é a hiodráitiú ag am rite. An Fhoirm Chéanna, Mar Shonraí Seo an fhoirm chéanna, an uair seo curtha in iúl mar réad JSON. Sainmhíníonn an scéimre gach rud: struchtúr, bailíochtú, rialacha infheictheachta, ríomhaireachtaí díorthaithe, nascleanúint leathanaigh - agus tugann sé do Mhúnla é a dhéanann meastóireacht air ag am rite. Seo an chuma atá air sin ina iomláine:
export const surveySchema = { teideal: "Sreabhadh Ordú", showProgressBar: "barr", leathanaigh: [ { ainm: "mionsonraí", eilimintí: [ { type: "text", ainm: "firstName", isRequired: true }, { type: "text", name: "ríomh-phost", ionchurType: "ríomhphost", isRequired: true, validators: [{ type: " } ríomhphost " !ainm: "Ráta cánach", réamhshocraitheLuach: 0.1, roghanna: [ { luach: 0.05, téacs: "5%" }, { luach: 0.1, téacs: "10%" }, { luach: 0.15, téacs: "15%" } ] }, { cineál: "léiriú", ainm: "subtotal" {}: "fo-ainm", {}: subtotal", {} = abairt "léiriú", ainm: "cáin", expression: "{ subtotal} {taxRate}" }, { type: "léiriú", ainm: "iomlán", abairt: "{ subtotal} + {tax}" } ] }, { ainm: "cuntas", eilimintí: [ { cineál: "radiogroup", ainm: "Tá Cuntas", roghanna ": ": {" Yes Cuntas", roghanna: [" }: "username", visibleIf: " {hasAccount} = 'Tá'", isRequired: true }, { type: "text", name: "password", inputType: "password", visibleIf: " {hasAccount} = 'Tá'", isRiachtanach: fíor, bailíochtaithe: [{ type: "text", minLength: 6, 6 characters: "Min cineál: {}: "Min cineál:": "sásamh", rateMin: 1, rateMax: 5 }, { type: "comment", ainm: "positiveFeedback", visibleIf: " { sásamh } > = 4 " }, { cineál: " trácht", ainm: "feabhsúAiseolas", visibleIf: " {sásamh} <= 2" } ] } review, {0: infheicthe ", {0} eilimintí: [ ] } ]};
Déan comparáid idir é seo agus an leagan RHF ar feadh nóiméad.
Tá an bloc superRefine a raibh ainm úsáideora agus pasfhocal ag teastáil go coinníollach imithe. visibleIf: "{hasAccount} = 'Tá'" in éineacht le isRequired: Láimhseálann fíor an dá ábhar imní le chéile, ar an réimse féin, ina mbeifeá ag súil le teacht orthu. Cuirtear trí réimse slonn a thagraíonn dá chéile de réir ainm in ionad an tslabhra useWatch + useMemo a ríomh an fo-iomlán, an cháin agus an t-iomlán. Coinníoll an leathanaigh athbhreithnithe, a bhí sa leagan RHF in-athdhéanta ach amháin trí rianú trí showSubmit, an brainse rindreála céim 3. Agus ar deireadh, is maoin sofheicthe amháin í an loighic cnaipe nav ar an réad leathanach.
Tá an loighic chéanna ann. Níl ann ach go dtugann an scéimre áit chónaithe dó áit a bhfuil sé le feiceáil ina aonar, seachas é a scaipeadh ar fud an chomhpháirte. Tabhair faoi deara freisin go n-úsáideann an scéimre cineál: 'léiriú' le haghaidh fo-iomlán, cánach, agus iomlán. Tá slonn inléite amháin agus úsáidtear go príomha chun luachanna ríofa a thaispeáint. Tacaíonn SurveyJS freisin le cineál: 'html' le haghaidh ábhar statach, ach le haghaidh luachanna ríofa, is é slonn an rogha ceart. Anois don taobh React. Rindreáil Agus Aighneacht An-simplí. Sreangaigh onComplete chuig do API ar an mbealach céanna - trí useMutation nó gnáthghabháil:
allmhairiú { useState, useEffect, useRef } ó "react"; allmhairiú { useMutation } ó "@tanstack/react-query"; iompórtáil { Model } ó "survey-core"; allmhairiú { Survey } ó "survey-react-ui"; allmhairiú "survey-core/survey-core.css";
feidhm easpórtála SurveyForm() { const [model] = useState(() => Samhail nua(surveySchema));
const mutation = useMutation({ mutationFn: async (sonraí) => { const res = ag fanacht le fetch ("/api/orduithe", { modh: "POST", ceanntásca: { "Content-Type": "iarratas/json" }, comhlacht: JSON.stringify(sonraí), }); má (!res.ok) caith Earráid nua ("Theip ar chur isteach"); ais res.json(); }, });
const mutationRef = useRef(sóchán); mutationRef.current = sóchán; useEffect(() => { const handler = (seoltóir) => mutationRef.current.mutate(sender.data); model.onComplete.add(láimhseálaí); ais () => model.onComplete.remove(láimhseálaí); }, [múnla]); // ref seachnaíonn sé láimhseálaí a athchlárú gach rindreáil (athruithe ar chéannacht réad sóchán)
ar ais (
<>
Féach an Peann SurveyJS-03-SurveyJS [forked] by sixthextinction.
onComplete tinte nuair a shroicheann an t-úsáideoir deireadh an leathanaigh infheicthe deiridh. Mar sin mura dtrasnaíonn an t-iomlán 100 agus má dhéantar scipeáil ar an leathanach athbhreithnithe, téann sé i gceart fós mar go ndéanann SurveyJS measúnú ar infheictheacht sula gcinneann sé cad is brí le “leathanach deireanach”. Ansin, cuimsíonn sender.data na freagraí go léir mar aon leis na luachanna ríofa (fo-iomlán, cáin, iomlán) mar réimsí den chéad scoth, mar sin tá pálasta an API comhionann leis an leagan RHF a cuireadh le chéile de láimh in onSubmit. Tá anIs é patrún mutationRef an ceann céanna a bhainfeá amach áit ar bith a bhfuil láimhseálaí cobhsaí imeachta uait thar luach a athraíonn ar gach rindreáil - rud ar bith a bhaineann go sonrach le SurveyJS faoi.
Níl aon loighic ghnó ar bith sa chomhpháirt React a thuilleadh. Níl aon useWatch, aon JSX coinníollach, aon cuntar chéim, aon useMemo slabhra, aon superRefine. Tá React ag déanamh a bhfuil go maith aige: comhpháirt a rindreáil agus é a shreangú chuig glao API. Cad a Aistríodh As Frithghníomh?
Imní Cruach RHF SuirbhéJS Infheictheacht Craobhacha JSX infheictheIf Luachanna díorthaithe useWatch / useMemo léiriú Rialacha tras-réimse superRefine Coinníollacha scéimre Nascleanúint staid chéim Leathanach infheictheMás rud é Suíomh riail Dáilte thar chomhaid Láraithe sa scéimre
Is é an rud a fhanann in React ná leagan amach, stíliú, sreangú aighneachta, agus comhtháthú app, is é sin le rá, na rudaí a bhfuil React deartha dóibh i ndáiríre. Bhog gach rud eile isteach sa scéimre, agus toisc nach bhfuil sa scéimre ach réad JSON, is féidir é a stóráil i mbunachar sonraí, é a leagan go neamhspleách ar chód d’fheidhmchláir, nó é a chur in eagar trí uirlisiú inmheánach gan imscaradh a éileamh. Is féidir le bainisteoir táirge a chaithfidh an tairseach a spreagann an leathanach athbhreithnithe a athrú é sin a dhéanamh gan teagmháil a dhéanamh leis an gcomhpháirt. Sin difríocht oibríochta bríoch d’fhoirne ina dtagann iompraíocht fhoirme chun cinn go minic agus nach mbíonn sé á thiomáint ag innealtóirí i gcónaí. Cathain a Úsáidfidh Gach Cur Chuige? Seo ordóg mhaith a oibríonn dom: samhlaigh an fhoirm a scriosadh ina hiomláine. Cad a chaillfeá?
Más scáileáin atá ann, tá foirmeacha comhpháirte-tiomáinte uait. Más loighic ghnó í, cosúil le tairseacha, rialacha branchaithe, agus ceanglais choinníollacha a ionchódaíonn fíorchinntí, tá inneall scéimre uait.
Ar an gcaoi chéanna, má bhaineann na hathruithe atá ag teacht ar do bhealach den chuid is mó le lipéid, réimsí agus leagan amach, beidh RHF oiriúnach duit. Má bhaineann siad le coinníollacha, torthaí, agus rialacha a d’fhéadfadh go mbeadh ar do comharchumainn nó d’fhoireann dlí a choigeartú tráthnóna Dé Máirt gan ticéad a chomhdú, is é an tsamhail scéimre le SurveyJS a oireann níos macánta. Níl an dá chur chuige seo in iomaíocht lena chéile i ndáiríre. Téann siad i ngleic le haicmí éagsúla fadhbanna, agus is é an botún is fiú a sheachaint ná an t-astarraingt a chur in oiriúint do mheáchan na loighce — córas rialacha a chóireáil mar chomhpháirt toisc gurb é sin an uirlis aithnidiúil, nó cuardach a dhéanamh ar inneall beartais toisc gur mhéadaigh foirm go trí chéim agus go bhfuarthas réimse coinníollach. Tá an fhoirm a thógamar anseo suite in aice leis an teorainn d’aon ghnó, casta go leor chun an difríocht a nochtadh ach níl sé chomh foircneach sin go mbraitheann an chomparáid rigged. Is dócha go bhfuil an chuid is mó de na foirmeacha réadúla a d’éirigh go han-chraicneach i do bhunchód ina suí in aice leis an teorainn chéanna sin, agus de ghnáth is é an cheist an bhfuil duine ar bith ainmnithe cad atá iontu. Úsáid Foirm Hook React + Zod nuair:
Tá foirmeacha dírithe ar CRUD; Tá an loighic éadomhain agus UI-tiomáinte; Is leis na hinnealtóirí gach iompar; Inneall fós foinse na fírinne.
Úsáid SurveyJS nuair:
Ionchódaíonn foirmeacha cinntí gnó; Forbraíonn rialacha go neamhspleách ar Chomhéadain; Ní mór don loighic a bheith sofheicthe, in-iniúchta nó leagan; Bíonn tionchar ag neamh-innealtóirí ar iompar; Caithfidh an fhoirm chéanna a bheith trasna ar aghaidheanna iolracha.
