ይህ መጣጥፍ በ SurveyJS የተደገፈ ነው። ጮክ ብለው ሳይወያዩበት አብዛኞቹ React ገንቢዎች የሚያጋሩት የአእምሮ ሞዴል አለ። ያ ቅጾች ሁል ጊዜ አካላት መሆን አለባቸው። ይህ ማለት እንደዚህ ያለ ቁልል ማለት ነው።
ምላሽ መንጠቆ ቅጽ ለአካባቢው ግዛት (አነስተኛ ድጋሚ ሰሪዎች፣ ergonomic መስክ ምዝገባ፣ አስፈላጊ መስተጋብር)። ዞድ ለማረጋገጫ (የግቤት ትክክለኛነት ፣ የወሰን ማረጋገጫ ፣ ዓይነት-አስተማማኝ ትንተና)። ለድጋፍ ጥያቄ ምላሽ ይስጡ፡ ማስገባት፣ እንደገና መሞከር፣ መሸጎጫ፣ የአገልጋይ ማመሳሰል እና የመሳሰሉት።
እና ለአብዛኛዎቹ ቅጾች - የመግቢያ ማያ ገጾችዎ ፣ የቅንጅቶችዎ ገጾች ፣ የእርስዎ CRUD ሞዴሎች - ይህ በትክክል በጥሩ ሁኔታ ይሰራል። እያንዳንዱ ቁራጭ ስራውን ያከናውናል፣ በንጽህና ያዘጋጃሉ፣ እና ምርትዎን በትክክል ወደሚለዩት የመተግበሪያዎ ክፍሎች መሄድ ይችላሉ። ነገር ግን አልፎ አልፎ፣ አንድ ቅጽ ቀደም ባሉት መልሶች ላይ የሚመሰረቱ የታይነት ህጎች፣ ወይም በሦስት መስኮች ውስጥ የሚንሸራተቱ እሴቶች ያሉ ነገሮችን ማሰባሰብ ይጀምራል። ምናልባት በጠቅላላ ሩጫ ላይ ተመስርተው ሊዘለሉ ወይም ሊታዩ የሚገባቸው ሙሉ ገጾች። የመጀመሪያውን ሁኔታዊ በአጠቃቀም ዋች እና በውስጥ መስመር ቅርንጫፍ ታስተናግዳለህ፣ ይህም ጥሩ ነው። ከዚያም ሌላ. ከዚያ የዞድ ንድፍዎ በተለመደው መንገድ መግለጽ የማይችለውን የመስክ አቋራጭ ህጎችን ለመመስረት ለ superRefine እየደረሱ ነው። ከዚያ የደረጃ አሰሳ የንግድ ሎጂክን ማፍሰስ ይጀምራል። የሆነ ጊዜ፣ የገነቡትን ይመለከታሉ እና ቅጹ ከአሁን በኋላ በትክክል UI አለመሆኑን ይገነዘባሉ። እሱ የበለጠ የውሳኔ ሂደት ነው ፣ እና ዛፉ እርስዎ ያከማቹት ቦታ ብቻ ነው። እኔ እንደማስበው በReact ውስጥ የአዕምሮ ሞዴል የሚፈርስበት ነው፣ እና በእውነቱ የማንም ስህተት አይደለም። የRHF + Zod ቁልል ለተሰራለት ነገር በጣም ጥሩ ነው። ጉዳዩ ከችግሩ ጋር የሚጣጣሙበትን ነጥብ አልፈን መጠቀሙን እንቀጥላለን ምክንያቱም አማራጩ ስለ ቅጾች ሙሉ በሙሉ የተለየ አስተሳሰብ ይፈልጋል። ይህ ጽሑፍ ስለዚያ አማራጭ ነው. ይህንን ለማሳየት፣ ትክክለኛውን ባለብዙ ደረጃ ቅጽ ሁለት ጊዜ እንገነባለን፡
ለምላሽ ጥያቄ ምላሽ ለመስጠት በReact Hook ቅጽ + ዞድ በገመድ ቅጽን እንደ ዳታ ከሚመለከተው SurveyJS ጋር - ቀላል JSON schema - ከመለዋወጫ ዛፍ ይልቅ።
ተመሳሳይ መስፈርቶች፣ ተመሳሳይ ሁኔታዊ አመክንዮ፣ መጨረሻ ላይ ተመሳሳይ የኤፒአይ ጥሪ። ከዚያ ምን እንደተንቀሳቀሰ እና ምን እንደቀረ በትክክል እናስቀምጣለን እና የትኛውን ሞዴል እና መቼ መጠቀም እንዳለቦት ለመወሰን ተግባራዊ ዘዴን እንዘረጋለን። የምንገነባው ቅጽ:
ይህ ቅጽ ባለ 4-ደረጃ ፍሰት ይጠቀማል፡- ደረጃ 1: ዝርዝሮች
የመጀመሪያ ስም (አስፈላጊ) ፣ ኢሜይል (የሚያስፈልግ፣ የሚሰራ ቅርጸት)።
ደረጃ 2፡ እዘዝ
የአንድ ክፍል ዋጋ ፣ ብዛት፣ የግብር መጠን፣ የተገኘ፡ አጠቃላይ፣ ግብር፣ ጠቅላላ።
ደረጃ 3፡ መለያ እና ግብረመልስ
መለያ አለህ? (አዎ/አይ) አዎ ከሆነ → የተጠቃሚ ስም + ይለፍ ቃል፣ ሁለቱም ያስፈልጋል። አይ ከሆነ → ኢሜይል በደረጃ 1 ተሰብስቧል።
የእርካታ ደረጃ (1-5) ከሆነ ≥ 4 → "ምን ወደዳችሁ?" ≤ 2 → “ምን ማሻሻል እንችላለን?” ብለው ከጠየቁ።
ደረጃ 4፡ ይገምግሙ
ጠቅላላ >= 100 ከሆነ ብቻ ነው የሚታየው የመጨረሻ ማስረከብ።
ይህ ጽንፍ አይደለም። ግን የስነ-ህንፃ ልዩነቶችን ማጋለጥ በቂ ነው. ክፍል 1፡ በንጥል የሚነዳ (React Hook Form + Zod) መጫን npm install react-hook-form zod @hookform/resoluvers @tanstack/react-query
Zod Schema በ Zod schema እንጀምር, ምክንያቱም ብዙውን ጊዜ የቅጹ ቅርጽ የሚመሰረትበት ነው. ለመጀመሪያዎቹ ሁለት ደረጃዎች - የግል ዝርዝሮች እና ግብዓቶች ቅደም ተከተል - ሁሉም ነገር ቀጥተኛ ነው: አስፈላጊ ሕብረቁምፊዎች, አነስተኛ ቁጥሮች እና ቁጥሮች. ሁኔታዊ ደንቦችን ለመግለጽ ሲሞክሩ አስደሳችው ክፍል ይጀምራል.
አስመጣ {z } ከ "zod";
ኤክስፖርት const formSchema = z.object({የመጀመሪያ ስም፡ z.string() z.string () አማራጭ () የይለፍ ቃል: z.string () አማራጭ (), እርካታ: z.ቁጥር ().ደቂቃ (1).ከፍተኛ (5), positiveFeedback: z.string ().አማራጭ (), ማሻሻያ ግብረመልስ: z.string ().አማራጭ (),}).SuperRefine ((ዳታ, ctx) => { ከሆነ (ዳታ. አካውንት ያለው") {ስም ከሆነ. ctx.addIssue ({ ኮድ: "ብጁ", ዱካ: ["የተጠቃሚ ስም"], መልእክት: "የሚያስፈልግ" });
ከሆነ (data.satisfaction >= 4 && !data.positiveFeedback) {ctx.addIssue({code: " custom", path: ["positiveFeedback"] መልእክት: "እባክዎ የወደዱትን ያካፍሉ"}); }
ከሆነ (data.satisfaction <= 2 && !data.improvementFeedback) {ctx.addIssue({code: " custom", path:["improvementFeedback"]፣ መልእክት፡ "እባክዎ ምን ማሻሻል እንዳለብን ይንገሩን"}); }});
የመላክ አይነት FormData = z.infer
የተጠቃሚ ስም እና የይለፍ ቃል እንደ አማራጭ () መተየባቸውን አስተውል ምንም እንኳን በቅድመ ሁኔታ የሚፈለጉ ቢሆኑም የዞድ ዓይነት-ደረጃ ንድፍ የሚገልጸው የነገሩን ቅርጽ እንጂ መስኮች በሚወስኑበት ጊዜ የሚገዙትን ህጎች አይደለም። ሁኔታዊ መስፈርቱ በሱፐርሪፊን ውስጥ መኖር አለበት፣ እሱም ቅርጹ ከተረጋገጠ በኋላ የሚሰራ እና ወደ ሙሉ እቃው መድረስ ይችላል። ያ መለያየት ጉድለት አይደለም; መሣሪያው የተነደፈው ብቻ ነው፡ ሱፐርሪፊን የመስክ አቋራጭ አመክንዮ የሚሄድበት በእቅድ አወቃቀሩ ውስጥ ሊገለጽ በማይችልበት ጊዜ ነው። እዚህ ላይ የሚታወቀው ይህ እቅድ የማይገልጸው ነው. የገጾች ፅንሰ-ሀሳብ የለውም፣ የትኛዎቹ መስኮች በየትኛው ነጥብ ላይ እንደሚታዩ እና የአሰሳ ጽንሰ-ሀሳብ የለውም። ይህ ሁሉ ሌላ ቦታ ይኖራል. የቅጽ አካል
አስመጣ { useForm, useWatch } ከ "react-hook-form" አስመጣ፤ { zodResolver } ከ"@hookform/resolvers/zod" አስመጣ፤ አስመጣ {useMutation } ከ"@tanstack/react-query"፤ አስመጣ {useState፣ useMemo } ከ"react"፤ አስመጣ {formSchema፣ አይነት}
const STEPS = ["ዝርዝሮች", "ትዕዛዝ", "መለያ", "ግምገማ"];
ዓይነት OrderPayload = FormData & {ንዑስ ድምር፡ ቁጥር; ግብር፡ ቁጥር; ድምር፡ ቁጥር};
የኤክስፖርት ተግባር RHFMultiStepForm () {const [ደረጃ, setStep] = useState (0);
const ሚውቴሽን = ሚውቴሽን አጠቃቀም ({ ሚውቴሽንFn: async (ክፍያ: OrderPayload) => { const res = ለማምጣት ይጠብቁ("/api/orders", { ዘዴ: "POST", ራስጌዎች፡ {"የይዘት አይነት"፡ "application/json" }፣ አካል፡ JSON.stringify(የክፍያ)፣ }); ከሆነ (!res.ok) አዲስ ስህተት ከጣለ ("ማስረከብ አልተሳካም"); መመለስ res.json (); } });
const { ይመዝገቡ ፣ ይቆጣጠሩ ፣ ያቅርቡ ፣ formState: {ስህተት} ፣ } = useForm
መመለስ (
);}የብዕር ዳሰሳ JS-03-RHF ይመልከቱ [forked] በ sixthextinction። እዚህ በጣም ብዙ ነገር እየተከሰተ ነው፣ እና ነገሮች የት እንዳበቁ ለማወቅ ማቀዝቀዝ ጠቃሚ ነው።
የተገኙት እሴቶች - ድምር፣ ታክስ፣ ድምር - በክፍል ውስጥ በአጠቃቀም ዋት እና በአጠቃቀም ሜሞ ይሰላሉ ምክንያቱም እነሱ በቀጥታ የመስክ እሴቶች ላይ ስለሚመሰረቱ እና ለእነሱ ሌላ የተፈጥሮ ቦታ ስለሌለ። የተጠቃሚ ስም፣ የይለፍ ቃል፣ አዎንታዊ ግብረመልስ እና ማሻሻያ የታይነት ህጎች በJSX ውስጥ እንደ የመስመር ውስጥ ቅድመ ሁኔታዎች ይኖራሉ። የእርምጃ መዝለል አመክንዮ - የግምገማ ገጹ በጠቅላላ >= 100 - ወደ ትርኢት አስገባ ተለዋዋጭ እና በደረጃ 3 ላይ ያለው የዝግጅት ሁኔታ ሲካተት ብቻ ይታያል። አሰሳ እራሱ በእጅ የምንጨምረው የአጠቃቀም ግዛት ቆጣሪ ነው። ምላሽ ይስጡ መጠይቅ ድጋሚ ሙከራዎችን፣ መሸጎጫ እና ውድቅነትን ይቆጣጠራል። ቅጹ ከተረጋገጠ ውሂብ ጋር ሚውቴሽን.mutate ብሎ ይጠራል።
ከእነዚህ ውስጥ አንዳቸውም ስህተት አይደሉም, በእያንዳንዱ. ይህ አሁንም ፈሊጣዊ ምላሽ ነው፣ እና ዝግጅቱ አርኤችኤፍ እንዴት በድጋሚ አድራጊዎችን እንደሚያገለግል እናመሰግናለን። ነገር ግን ይህንን ላልፃፈው ሰው ካስረከቡ እና የግምገማ ገጹ በምን አይነት ሁኔታዎች ላይ እንደሚታይ እንዲያብራሩ ከጠየቁ፣ በአንድ መስመር ውስጥ ሊገለፅ የሚችል ህግን እንደገና ለመገንባት በ showSubmit፣ ደረጃ 3 የመስጠት ሁኔታ እና የናቭ ቁልፍ አመክንዮ - ሶስት የተለያዩ ቦታዎችን መከታተል አለባቸው። ቅጹ አዎን, ነገር ግን ባህሪው እንደ ስርዓት በትክክል አይመረመርም. በአእምሮ መተግበር አለበት። በይበልጥ, መለወጥ የምህንድስና ተሳትፎን ይጠይቃል. ትንሽ ለውጥ እንኳን፣ የግምገማው ደረጃ ሲታይ ማስተካከል ማለት ክፍሉን ማረም፣ ማረጋገጫን ማዘመን፣ የመሳብ ጥያቄን መክፈት፣ ግምገማን መጠበቅ እና እንደገና ማሰማራት ማለት ነው። ክፍል 2፡ በእቅድ የሚመራ (የዳሰሳ ጥናት JS) አሁን ንድፍ በመጠቀም ተመሳሳይ ፍሰት እንገንባ. መጫን npm install survey-core survey-react-ui @tanstack/react-query
ዳሰሳ-ኮር የ SurveyJS ፎርም አተረጓጎም ኃይል ያለው በ MIT ፈቃድ ያለው የመሣሪያ ስርዓት-ገለልተኛ የአሂድ ጊዜ ሞተር - እዚህ የምንጨነቅበት ክፍል። የJSON ንድፍ ይወስዳል፣ የውስጥ ሞዴልን ይገነባል፣ እና በእርስዎ ምላሽ አካል ውስጥ ሊኖሩ የሚችሉትን ሁሉንም ነገሮች ያስተናግዳል፡ የታይነት መግለጫዎችን መገምገም፣ የተገኙ እሴቶችን ማስላት፣ የገጽ ሁኔታን ማስተዳደር፣ ማረጋገጥን መከታተል እና የትኛዎቹ ገፆች በትክክል እንደሚታዩ “የተሟላ” ማለት ምን ማለት እንደሆነ መወሰን። Survey-react-ui ያንን ሞዴል ከ React ጋር የሚያገናኘው የዩአይዩ/አሰራጭ ንብርብር። የኢንጂኑ ሁኔታ በተለወጠ ቁጥር እንደገና የሚሰራው የ<የዳሰሳ ሞዴል={model} /> አካል ነው። SurveyJS UI ቤተ-ፍርግሞች ለአንግላር፣ ለVue3 እና ለሌሎች በርካታ ማዕቀፎችም ይገኛሉ።
አንድ ላይ ሆነው አንድ ነጠላ የቁጥጥር ፍሰት ሳይጽፉ ሙሉ በሙሉ የሚሰራ ባለብዙ ገጽ ቅጽ የአሂድ ጊዜ ይሰጡዎታል። የመርሃግብር ቅርጸቱ ራሱ፣ ቀደም ሲል እንደተናገረው፣ JSON ብቻ ነው - ምንም DSL ወይም ምንም አይነት የባለቤትነት መብት የለውም። መስመር ውስጥ ማስገባት፣ ከፋይል ማምጣት፣ ከኤፒአይ ማምጣት ወይም በመረጃ ቋት አምድ ውስጥ ማከማቸት እና በሂደት ጊዜ ውሃ ማጠጣት ይችላሉ። ተመሳሳይ ቅጽ ፣ እንደ ውሂብ ተመሳሳይ ቅጽ ይኸውና በዚህ ጊዜ እንደ JSON ነገር ይገለጻል። መርሃግብሩ ሁሉንም ነገር ይገልፃል፡ መዋቅር፣ ማረጋገጫ፣ የታይነት ህጎች፣ የተገኙ ስሌቶች፣ የገጽ አሰሳ - እና በሂደት ጊዜ ለሚገመግም ሞዴል ሰጠው። ሙሉ በሙሉ ምን እንደሚመስል እነሆ፦
export const surveySchema = { ርዕስ፡ "ትዕዛዝ ፍሰት"፣ showProgressBar: "ከላይ"፣ ገፆች: [ {ስም: "ዝርዝሮች"፣ ንጥረ ነገሮች: [ { አይነት: "ጽሑፍ"፣ ስም: "የመጀመሪያ ስም"፣ isRequired: true ] }፣ {ስም፡ "ትዕዛዝ"፣ ንጥረ ነገሮች፡ [ { አይነት፡ "ጽሁፍ"፣ ስም፡ "ዋጋ"፣ ግቤት አይነት፡ "ቁጥር"፣ ነባሪ እሴት፡ 0}፣ { አይነት: "ጽሁፍ"፣ ስም: "ብዛት"፣ ግቤት አይነት: "ቁጥር"፣ ነባሪ እሴት: 1 }፣ { አይነት: "ቁልቁል"፣ስም፡ "የግብር ተመን"፣ ነባሪ እሴት፡ 0.1፣ ምርጫዎች፡ [ {እሴት፡ 0.05፣ ጽሑፍ፡ "5%"}፣ {እሴት፡ 0.1፣ ጽሑፍ፡"10%"}፣ {እሴት፡ 0.15፣ ጽሑፍ፡"15%"}] "መግለጫ", ስም: "ግብር", አገላለጽ: "{subtotal} {taxRate}" }, {ዓይነት: "መግለጫ", ስም: "ጠቅላላ" መግለጫ: "{ንዑስtotal} + {tax}" } ] }, { ስም: "መለያ", ክፍሎች: "username", visualIf: "{hasAccount} = 'አዎ'", isRequired: true }, { type: "text", name: "password", inputType: "password", visualIf: "{hasAccount} = 'Yes'", isRequired: true, validators: [{ type: "text", minlength: "text:" type: 6}, text: 6}, character ስም፡ "እርካታ"፣ rateMin: 1፣ rateMax: 5 }፣ { type: "comment", name: "positiveFeedback"፣ የሚታይ ከሆነ፡ "{አረካ} >= 4" 100", ንጥረ ነገሮች፡ []}];
ይህንን ለአፍታ ከRHF ስሪት ጋር ያወዳድሩ።
ሁኔታዊ በሆነ ሁኔታ የሚፈለገው የተጠቃሚ ስም እና የይለፍ ቃል የሱፐርሪፊን እገዳ ጠፍቷል። visualIf: "{hasAccount} = 'አዎ'" ከ isRequired ጋር ተደምሮ፡ እውነተኛ ሁለቱንም ስጋቶች በአንድነት ያስተናግዳል፣ በሜዳው ላይ፣ ያገኙታል ብለው የሚጠብቁት። ንዑስ ድምር፣ ታክስ እና ድምር ያሰፈረው የአጠቃቀም ዋች + የአጠቃቀም ሜሞ ሰንሰለት እርስ በእርሳቸው በስም በሚጣቀሱ በሶስት የገለፃ መስኮች ተተክቷል። የክለሳ ገጽ ሁኔታ፣ በRHF ስሪት ውስጥ እንደገና ሊገነባ የሚችለው በሾው አስገባን በመፈለግ ብቻ ደረጃ 3 ቅርንጫፍ ነው። እና በመጨረሻም ፣ የናቭ ቁልፍ አመክንዮ በገጹ ላይ ያለው ንብረት አንድ የሚታይ ከሆነ ነው።
ተመሳሳይ አመክንዮ አለ. መርሃግብሩ በክፍሉ ውስጥ ከመሰራጨት ይልቅ በተናጥል የሚታይበት የመኖሪያ ቦታ እንዲሰጥ ብቻ ነው. እንዲሁም፣ መርሃግብሩ አይነት እንደሚጠቀም ልብ ይበሉ፡- 'መግለጫ' ለንዑስ ድምር፣ ታክስ እና አጠቃላይ። አገላለጽ ተነባቢ-ብቻ ነው እና በዋናነት የሚሰሉ እሴቶችን ለማሳየት ያገለግላል። SurveyJS እንዲሁ አይነት: 'html' ለስታቲክ ይዘት ይደግፋል፣ ነገር ግን ለተሰሉ እሴቶች፣ አገላለጽ ትክክለኛው ምርጫ ነው። አሁን ለ React ወገን። ማቅረብ እና ማስረከብ በጣም ቀላል። ሽቦ ወደ የእርስዎ ኤፒአይ ያጠናቅቃል በተመሳሳይ መንገድ - በአጠቃቀም ሚውቴሽን ወይም ግልጽ ማምጣት፡
አስመጣ {useState, useEffect, useRef} ከ"react" አስመጣ፤ {useMutation } ከ"@tanstack/react-query" አስመጣ፤ አስመጣ {ሞዴል } ከ"የዳሰሳ-ኮር"፤ አስመጣ { የዳሰሳ ጥናት } ከ"የዳሰሳ-react-ui"፤"የዳሰሳ-ኮር/ሰርቬይ-ኮር" አስመጣ።
ወደ ውጪ መላክ ተግባር SurveyForm () {const [ሞዴል] = useState (() => አዲስ ሞዴል (የዳሰሳ ጥናት));
const ሚውቴሽን = ሚውቴሽን አጠቃቀም ({ ሚውቴሽንFn: async (ዳታ) => { const res = ለማምጣት ይጠብቁ("/api/orders", { ዘዴ: "POST", ራስጌዎች፡ {"የይዘት አይነት"፡ "application/json" }፣ አካል፡ JSON.stringify(ውሂብ)፣ }); ከሆነ (!res.ok) አዲስ ስህተት ከጣለ ("ማስረከብ አልተሳካም"); መመለስ res.json (); } });
const mutationRef = useRef(ሚውቴሽን); mutationRef.current = ሚውቴሽን; useEffect(() => {const ተቆጣጣሪ = (ላኪ) => ሚውቴሽንRef.current.mutate(ላኪ.ዳታ)፤ model.onComplete.add(አያዥ)፤ መመለስ () => ሞዴል.onComplete.remove(አያጅ)፤}፣ [ሞዴል]); // ማጣቀሻ ተቆጣጣሪን እንደገና መመዝገብን ያስወግዳል (ሚውቴሽን የነገር ማንነት ይለወጣል)
መመለስ ( <> <የዳሰሳ ጥናት ሞዴል={model} /> {mutation.isError &&
ብዕር ዳሰሳJS-03-SurveyJS ይመልከቱ [forked] በ sixthextinction።
ተጠቃሚው የመጨረሻው የሚታየው ገጽ መጨረሻ ላይ ሲደርስ ያጠናቅቃል። ስለዚህ አጠቃላይ 100 ካላለፈ እና የግምገማ ገጹ ከተዘለለ፣ አሁንም በትክክል ይቃጠላል ምክንያቱም SurveyJS “የመጨረሻ ገጽ” ማለት ምን ማለት እንደሆነ ከመወሰኑ በፊት ታይነትን ይገመግማል። ከዚያ፣ sender.data ሁሉንም መልሶች ከስሌቱ እሴቶች (ንዑስ ድምር፣ ታክስ፣ ጠቅላላ) ጋር እንደ አንደኛ ደረጃ መስኮች ይይዛል፣ ስለዚህ የኤፒአይ ክፍያው የ RHF ስሪት በSubmit ላይ በእጅ ከተሰበሰበው ጋር ተመሳሳይ ነው። የሚውቴሽን ሪፍ ስርዓተ-ጥለት በእያንዳንዱ ምስል ላይ በሚለዋወጠው እሴት ላይ የተረጋጋ የክስተት ተቆጣጣሪ በሚፈልጉበት ቦታ ላይ አንድ አይነት ነው - ስለሱ ምንም SurveyJS የተለየ ነገር የለም።
የ React ክፍል ከአሁን በኋላ ምንም የንግድ አመክንዮ አልያዘም። ምንም useWatch የለም፣ ምንም አይነት ሁኔታዊ JSX፣ ምንም የእርከን ቆጣሪ፣ ምንም የአጠቃቀም ሜሞ ሰንሰለት፣ ምንም ሱፐርሪፊኔ የለም። ምላሽ በእውነቱ ጥሩ የሆነውን እየሰራ ነው፡ አንድ አካል መስራት እና ወደ ኤፒአይ ጥሪ ማገናኘት ነው። ምላሽ ከመስጠት የወጣው ምንድን ነው?
ስጋት RHF ቁልል ዳሰሳ ጄ.ኤስ ታይነት JSX ቅርንጫፎች የሚታይ ከሆነ የተገኙ እሴቶች ተጠቀምWatch/Memo ይጠቀሙ አገላለጽ የመስክ ተሻጋሪ ህጎች ሱፐርሪፊን የመርሃግብር ሁኔታዎች አሰሳ የእርምጃ ሁኔታ ገጽ የሚታይ ከሆነ ደንብ አካባቢ በፋይሎች ተሰራጭቷል። በመርሃግብሩ ውስጥ የተማከለ
በሪአክት ውስጥ የሚቀረው አቀማመጥ፣ ስታይል፣ የማስረከቢያ ሽቦ እና የመተግበሪያ ውህደት ነው፣ ይህም ማለት ምላሽ የሚሰጡት ነገሮች በትክክል የተነደፉ ናቸው። ሁሉም ነገር ወደ እቅዱ ተንቀሳቅሷል፣ እና እቅዱ የJSON ነገር ብቻ ስለሆነ፣ በመረጃ ቋት ውስጥ ሊከማች፣ ከመተግበሪያ ኮድዎ ተለይቶ ሊቀየር ወይም ማሰማራት ሳያስፈልገው በውስጥ መሳሪያ ሊስተካከል ይችላል። የግምገማ ገጹን የሚቀሰቅሰውን ገደብ መቀየር የሚያስፈልገው የምርት አስተዳዳሪ ክፍሉን ሳይነካ ማድረግ ይችላል። የቅርጽ ባህሪ በተደጋጋሚ ለሚፈጠር እና ሁልጊዜም በመሐንዲሶች የማይመራ ለሆኑ ቡድኖች ይህ ትርጉም ያለው የአሠራር ልዩነት ነው። እያንዳንዱን አቀራረብ መቼ መጠቀም እንደሚቻል? ለእኔ የሚጠቅመኝ ጥሩ መመሪያ ይኸውና፡ ቅጹን ሙሉ በሙሉ መሰረዝን አስብ። ምን ታጣለህ?
ስክሪኖች ከሆነ፣ በክፍል የሚመሩ ቅጾችን ይፈልጋሉ። የንግድ አመክንዮ ከሆነ፣ ልክ እንደ ገደቦች፣ የቅርንጫፍ ደንቦች እና ትክክለኛ ውሳኔዎችን የሚያመለክቱ ሁኔታዊ መስፈርቶች፣ የሼማ ሞተር ይፈልጋሉ።
በተመሳሳይ፣ በእርስዎ መንገድ የሚመጡ ለውጦች በአብዛኛው ስለ መለያዎች፣ መስኮች እና አቀማመጥ ከሆኑ፣ RHF ጥሩ አገልግሎት ይሰጥዎታል። ትኬት ሳያስገቡ ማክሰኞ ከሰአት በኋላ የእርስዎ ኦፕስ ወይም የህግ ቡድን ማስተካከል ስለሚገባቸው ሁኔታዎች፣ ውጤቶች እና ደንቦች ከተመለከቱ፣ ከSurveyJS ጋር ያለው የመርሃግብር ሞዴል የበለጠ ታማኝነት ያለው ነው። እነዚህ ሁለት አቀራረቦች በእውነቱ እርስ በርስ የሚወዳደሩ አይደሉም. የተለያዩ የችግሮችን ክፍሎች ይመለከታሉ፣ እና ሊወገድ የሚገባው ስህተቱ ረቂቅነቱን ከአመክንዮው ክብደት ጋር አለመዛመድ ነው - የደንብ ስርዓትን እንደ አንድ አካል ማየቱ የተለመደው መሳሪያ ስለሆነ ወይም የፖሊሲ ሞተርን ማግኘት ምክንያቱም ቅጹ ወደ ሶስት ደረጃዎች ስላደገ እና ሁኔታዊ መስክ አግኝቷል። እዚህ የገነባነው ፎርም ሆን ብሎ ከድንበሩ አጠገብ ተቀምጧል፣ ልዩነቱን ለማጋለጥ ውስብስቦ ግን በጣም ጽንፍ ስላልሆነ ንፅፅሩ የተጭበረበረ እስኪመስል ድረስ። በኮድ ቤዝዎ ውስጥ ብዙ ያልተሰሩ እውነተኛ ቅጾች ምናልባት በዚያው ድንበር አጠገብ ይቀመጣሉ፣ እና ጥያቄው ብዙውን ጊዜ ማንም ሰው በትክክል ማንነቱን የሰየመ ስለመሆኑ ነው። በሚከተለው ጊዜ React Hook Form + Zod ይጠቀሙ
ቅጾች CRUD-ተኮር ናቸው; አመክንዮ ጥልቀት የሌለው እና በUI የሚመራ ነው; መሐንዲሶች የሁሉም ባህሪ ባለቤት ናቸው; ጀርባ የእውነት ምንጭ ሆኖ ይቀራል።
በሚከተለው ጊዜ SurveyJS ይጠቀሙ
ቅጾች የንግድ ውሳኔዎችን ያመለክታሉ; ህጎች ከዩአይዩ ነፃ ሆነው ይሻሻላሉ ፤ አመክንዮ የሚታይ፣ የሚመረመር ወይም የሚታተም መሆን አለበት፤ መሐንዲሶች ያልሆኑ ባህሪ ላይ ተጽዕኖ; ተመሳሳዩ ቅፅ በበርካታ የፊት ጫፎች ላይ መሮጥ አለበት።
