ئەم بابەتە لەلایەن SurveyJS سپۆنسەر کراوە مۆدێلێکی دەروونی هەیە کە زۆربەی گەشەپێدەرانی React هاوبەشی دەکەن بەبێ ئەوەی هەرگیز بە دەنگی بەرز باسی بکەن. کە فۆرمەکان هەمیشە بڕیارە پێکهاتە بن. ئەمەش واتە ستاکێکی وەک:
فۆڕمی کاردانەوەی قەڵغان بۆ دۆخی ناوخۆیی (کەمترین دووبارە ڕەندەرکردن، تۆمارکردنی مەیدانی ئەرگونۆمی، کارلێکی پێویست). Zod بۆ چەسپاندن (ڕاستی هاتنەژوورەوە، چەسپاندنی سنوور، شیکردنەوەی سەلامەتی جۆر). React Query بۆ باکئەند: ناردن، دووبارە هەوڵدان، کاشکردن، هاوکاتکردنی سێرڤەر و هتد.
وە بۆ زۆربەی زۆری فۆڕمەکان — شاشەکانی چوونەژوورەوەت، لاپەڕەکانی ڕێکخستنەکانت، مۆداڵەکانی CRUD — ئەمە بەڕاستی بە باشی کاردەکات. هەر پارچەیەک کاری خۆی دەکات، بە پاکی پێکهاتە دەکەن، دەتوانیت بچیتە سەر ئەو بەشانەی ئەپلیکەیشنەکەت کە لە ڕاستیدا جیاوازی لە بەرهەمەکەتدا دەکەن. بەڵام جارجارە فۆرمێک دەست دەکات بە کەڵەکەکردنی شتەکانی وەک یاساکانی بینین کە پشت بە وەڵامەکانی پێشووتر دەبەستن، یان بەها وەرگیراوەکان کە بە سێ بواردا دەڕژێن. ڕەنگە تەنانەت تەواوی لاپەڕەکانیش کە پێویستە بە پشتبەستن بە کۆی گشتی ڕاکردن پیشان بدرێن یان پیشان بدرێن. تۆ یەکەم مەرجدار بە useWatch و لقێکی ناو هێڵ مامەڵەی لەگەڵ دەکەیت، کە ئەمەش باشە. پاشان یەکێکی تر. پاشان دەستت دەگاتە superRefine بۆ کۆدکردنی یاساکانی cross-field کە شێمای Zod ـەکەت ناتوانێت بە شێوەیەکی ئاسایی دەریببڕێت. پاشان، گەشتکردن بە هەنگاو دەست دەکات بە دزەپێکردنی لۆژیکی بازرگانی. لە شوێنێکدا، سەیری ئەو شتانە دەکەیت کە دروستت کردووە و تێدەگەیت کە فۆڕمەکە لە ڕاستیدا ئیتر UI نییە. زیاتر پرۆسەی بڕیارە، و درەختی پێکهاتەکان تەنها لەو شوێنەیە کە تۆ بەڕێکەوت هەڵیگرتیت. ئەمەیە کە پێموایە مۆدێلی دەروونی بۆ فۆرمەکان لە React دا تێکدەچێت، و بەڕاستی خەتای کەس نییە. ستاکی RHF + Zod نایاب و باشە لەوەی کە بۆی دیزاین کراوە. مەسەلەکە ئەوەیە کە ئێمە مەیلی ئەوەمان هەیە بەردەوام بەکاری بهێنین لەو خاڵەی کە ئەبستراکتەکانی لەگەڵ کێشەکەدا دەگونجێت چونکە بەدیلەکە پێویستی بە شێوازێکی جیاوازە بۆ بیرکردنەوە لە فۆرمەکان بە تەواوی. ئەم بابەتە سەبارەت بەو بەدیلەیە. بۆ نیشاندانی ئەمە، ئێمە دوو جار بە تەواوی هەمان فۆڕمی فرە هەنگاوی دروست دەکەین:
لەگەڵ فۆڕمی React Hook + Zod کە وایەر کراوە بۆ React Query بۆ پێشکەشکردن، لەگەڵ SurveyJS، کە فۆرمێک وەک داتا مامەڵەی لەگەڵ دەکات — شێمایەکی سادەی JSON — نەک دارێکی پێکهاتە.
هەمان پێداویستییەکان، هەمان لۆژیکی مەرجدار، هەمان بانگەوازی API لە کۆتاییدا. پاشان بە تەواوی نەخشەی چی جووڵاوە و چی ماوەتەوە، و ڕێگەیەکی پراکتیکی دادەڕێژین بۆ بڕیاردان لەسەر ئەوەی کام مۆدێل بەکاربهێنیت، و کەی. ئەو فۆرمەی ئێمە دروستی دەکەین:
ئەم فۆڕمە ڕەوتی ٤ هەنگاوی بەکاردەهێنێت: هەنگاوی یەکەم: وردەکارییەکان
ناوی یەکەم (پێویستە)، ئیمەیڵ (پێویستە، فۆرماتێکی دروست).
هەنگاوی دووەم: داوا بکە
نرخی یەکە، بڕی، ڕێژەی باج، وەرگیراو: کۆی گشتی، باج، کۆی گشتی.
هەنگاوی سێیەم: ئەکاونت و فیدباک
ئەکاونتت هەیە؟ (بەڵێ/نەخێر) ئەگەر بەڵێ → ناوی بەکارهێنەر + وشەی نهێنی، هەردووکیان پێویستە. ئەگەر نەخێر → ئیمەیڵ پێشتر لە هەنگاوی یەکەمدا کۆکرابێتەوە.
هەڵسەنگاندنی ڕەزامەندی (1–5) ئەگەر ≥ 4 → بپرسە “چیت بەدڵ بوو؟” ئەگەر ≤ 2 → بپرسە “چی دەتوانین باشتر بکەین؟”
هەنگاوی چوارەم: پێداچوونەوە
تەنها لە حاڵەتێکدا دەردەکەوێت کە کۆی گشتی >= 100 بێت پێشکەشکردنی کۆتایی.
ئەمە توندڕەوی نییە. بەڵام بەسە بۆ ئاشکراکردنی جیاوازییەکانی تەلارسازی. بەشی یەکەم: بەهۆی پێکهاتەکانەوە (فۆڕمی کاردانەوەی قەڵغان + زۆد) دامەزراندنی npm دامەزراندنی react-hook-form zod @hookform/resolvers @tanstack/react-query
زۆد سکیما با لە شێمای زۆدەوە دەست پێ بکەین، چونکە بەزۆری لەوێدا شێوەی فۆرمەکە جێگیر دەبێت. بۆ دوو هەنگاوی یەکەم — وردەکارییە کەسییەکان و هاتنە ژوورەوەی داواکاری — هەموو شتێک ڕاستەوخۆیە: ڕیزەکانی پێویست، ژمارەکان بە کەمترین و enum. بەشە سەرنجڕاکێشەکە کاتێک دەست پێدەکات کە هەوڵدەدەیت یاسا مەرجدارەکان دەرببڕیت.
هاوردەکردنی { z } لە "zod"؛
export const formSchema = z.object({ ناوی یەکەم: z.string().min(1, "پێویستە"), ئیمەیڵ: z.string().email("ئیمەیڵی نادروست"), نرخ: z.number().min(0), بڕی: z.number().min(1), taxRate: z.number(), hasAccount: z.enum(["بەڵێ", "نەخێر"]), ناوی بەکارهێنەر: z.string().هەڵبژاردە()، وشەی نهێنی: z.string().هەڵبژاردە()، ڕەزامەندی: z.ژمارە().min(1).max (5)، پۆزەتیڤ فیدباک: z.string().هەڵبژاردە()، باشترکردنی فیدباک: z.string().هەڵبژاردە()،}).superRefine((داتا، ctx) => { ئەگەر (داتا.هەژماری هەیە === "بەڵێ") { ئەگەر (!data.username) { ctx.addIssue({ کۆد: "تایبەتمەند"، ڕێڕەو: ["ناوی بەکارهێنەر"], پەیام: "پێویستە" });
if (data.satisfaction >= 4 && !data.positiveFeedback) { ctx.addIssue({ کۆد: "تایبەتمەند", ڕێڕەو: ["پێداویستی ئەرێنی"], پەیام: "تکایە ئەوەی بەدڵت بوو بەشی بکە" }); }
if (data.ratisfaction <= 2 && !data.improvementFeedback) { ctx.addIssue({ کۆد: "تایبەتمەندی"، ڕێڕەو:["improvementFeedback"], message: "تکایە پێمان بڵێ چی باشتر بکەین" }); }});
جۆری هەناردەکردن FormData = z.infer<جۆری فۆرمSchema>;
سەرنج بدە کە ناوی بەکارهێنەر و وشەی نهێنی وەک optional() دەنووسرێن هەرچەندە بە مەرج پێویستن چونکە شێمای ئاستی جۆری Zod شێوەی شتەکە باس دەکات، نەک ئەو یاسایانەی کە حوکم دەدەن کەی مەیدانەکان گرنگن. مەرجی مەرجدار دەبێت لەناو superRefine بژی، کە دوای چەسپاندنی شێوەکە کاردەکات و دەستی بە ئۆبجێکتی تەواو دەگات. ئەو دابڕانە کەموکوڕی نییە؛ ئەوە تەنها ئەوەیە کە ئامرازەکە بۆی دیزاین کراوە: superRefine ئەو شوێنەیە کە لۆژیکی cross-field دەڕوات کاتێک ناتوانرێت لە خودی پێکهاتەی سکیمادا دەرببڕدرێت. ئەوەی لێرەدا جێگەی سەرنجە ئەوەیە کە ئەم شێمایە چی دەرنابڕێت. هیچ چەمکێکی لاپەڕەکانی نییە، هیچ چەمکێکی نییە کە کام بوار لە کام خاڵدا دیارە و هیچ چەمکێکی گەشتیاری نییە. هەموو ئەوانە لە شوێنێکی تردا دەژین. پێکهاتەی فۆڕم
هاوردەکردن { useForm, useWatch } لە "react-hook-form";هاوردەکردنی { zodResolver } لە "@hookform/resolvers/zod";هاوردەکردن { useMutation } لە "@tanstack/react-query";هاوردەکردنی { useState، useMemo } لە "react";هاوردەکردن { formSchema، جۆری FormData } لە "./schema"؛
const STEPS = ["وردەکاری"، "فەرمان"، "ئەژمێر"، "پێداچوونەوە"];
type OrderPayload = FormData & { کۆی گشتی: ژمارە؛ باج: ژمارە؛ کۆی گشتی: ژمارە };
فەنکشنی هەناردەکردن RHFMultiStepForm() { const [هەنگاو، هەنگاوی ڕێکخستن] = دۆخی بەکارهێنان (0);
const گۆڕانکاری = بەکارهێنانی گۆڕانکاری ({ mutationFn: async (باری سوودبەخش: OrderPayload) => { const res = چاوەڕوان بن fetch("/api/orders", { شێواز: "POST"، headers: { "جۆری ناوەڕۆک": "بەرنامە/json" }, جەستە: JSON.stringify (باری سوودبەخش)، }); if (!res.ok) throw new Error("ناردنی شکستی هێنا"); گەڕانەوەی res.json (); }، });
const { تۆمارکردن، کۆنترۆڵکردن، handleSubmit، formState: { هەڵەکان }، } = useForm
return (
);}سەیری ڕاپرسی قەڵەم بکەJS-03-RHF [چنگاڵ کراوە] بە شەش لەناوچوون. لێرەدا زۆر شت ڕوودەدات، شایەنی ئەوەشە خاو بکەینەوە بۆ ئەوەی تێبینی ئەوە بکەین کە شتەکان لە کوێ کۆتاییان هاتووە.
بەها وەرگیراوەکان — کۆی گشتی، باج، کۆی گشتی — لە پێکهاتەکەدا لە ڕێگەی useWatch و useMemo حیسابی بۆ دەکرێت چونکە پشت بە بەهاکانی مەیدانی ڕاستەوخۆ دەبەستن و هیچ شوێنێکی سروشتی تر بۆیان نییە. یاساکانی بینین بۆ ناوی بەکارهێنەر، وشەی نهێنی، positiveFeedback و improvementFeedback لە JSX وەک مەرجی ناو هێڵ دەژین. لۆژیکی هەنگاو-پەڕینەوە - لاپەڕەی پێداچوونەوە تەنها کاتێک دەردەکەوێت کە کۆی گشتی >= 100 - لە گۆڕاوەی showSubmit و مەرجی ڕەندەر لە هەنگاوی 3دا جێگیرکراوە. گەشتکردن خۆی تەنها ژمێرەری useState ە کە ئێمە بە دەستی زیاد دەکەین. React Query مامەڵە لەگەڵ دووبارە هەوڵدان و کاشکردن و نادروستکردن دەکات. فۆڕمەکە تەنها بانگی mutation.mutate دەکات بە داتای پەسەندکراو.
هیچ کام لەمانە هەڵە نین، خۆیان. ئەمە هێشتا ئیدیۆماتیک React ە، و پێکهاتەکە تەواو کاراییە بەهۆی ئەوەی کە چۆن RHF دووبارە ڕەندەرەکان جیا دەکاتەوە. بەڵام ئەگەر ئەمە بدەیت بە کەسێک کە نەینووسیوە و داوای لێبکەیت ڕوونی بکاتەوە کە لاپەڕەی پێداچوونەوەکە لە ژێر چ بارودۆخێکدا دەردەکەوێت، ئەوا دەبێت لە ڕێگەی showSubmit و مەرجی ڕەندەری هەنگاوی ٣ و لۆژیکی دوگمەی nav — سێ شوێنی جیاواز — شوێنپێی بگرن بۆ ئەوەی یاسایەک بنیات بنێنەوە کە دەکرا لە یەک دێڕدا باس بکرێت. فۆرمەکە کاردەکات، بەڵێ، بەڵام ڕەفتارەکە لە ڕاستیدا وەک سیستەمێک پشکنین ناکرێ. دەبێت لە ڕووی دەروونییەوە لە سێدارە بدرێت. لەوەش گرنگتر گۆڕینی پێویستی بە بەشداری ئەندازیاری هەیە. تەنانەت تویکێکی بچووک، وەک ڕێکخستنی کاتێک هەنگاوی پێداچوونەوەکە دەردەکەوێت، واتە دەستکاریکردنی پێکهاتەکە، نوێکردنەوەی چەسپاندن، کردنەوەی داواکاری ڕاکێشان، چاوەڕوانی پێداچوونەوە و دووبارە بڵاوکردنەوە. بەشی دووەم: Schema-Driven (SurveyJS) ئێستا با هەمان فلۆو دروست بکەین بە بەکارهێنانی سکیما. دامەزراندنی npm دامەزراندنی ڕاپرسی-ناوکی ڕاپرسی-کاردانەوە-ui @tanstack/react-query
survey-core بزوێنەری کاتی جێبەجێکردنی سەربەخۆی پلاتفۆرمی مۆڵەتپێدراوی MIT کە توانای ڕەندەری فۆڕمی SurveyJS دەدات — ئەو بەشەی کە ئێمە لێرەدا گرنگی پێدەدەین. شێمایەکی JSON وەردەگرێت، مۆدێلێکی ناوخۆیی لێ دروست دەکات، و مامەڵە لەگەڵ هەموو ئەو شتانە دەکات کە ئەگەرنا لە پێکهاتەی React ـتدا دەژین: هەڵسەنگاندنی دەربڕینەکانی بینین، حیسابکردنی بەها وەرگیراوەکان، بەڕێوەبردنی دۆخی لاپەڕە، بەدواداچوون بۆ چەسپاندن، و بڕیاردان لەسەر ئەوەی کە "تەواو" مانای چییە بە لەبەرچاوگرتنی ئەوەی کە کام لاپەڕە لە ڕاستیدا نیشان دراوە.
survey-react-uiچینی UI / ڕێندەرکردن کە ئەو مۆدێلە بە React دەبەستێتەوە. لە بنەڕەتدا پێکهاتەیەکی
پێکەوە، ئەوان کاتێکی جێبەجێکردنی فۆڕمێکی تەواو کارایی و فرە لاپەڕەییتان پێدەبەخشن بەبێ ئەوەی یەک دێڕی ڕەوتی کۆنترۆڵ بنووسن. فۆرماتەکەی سکیما خۆی، وەک پێشتر گوتمان، تەنها JSON یە — هیچ DSL یان هیچ شتێکی خاوەندارێتی نییە. دەتوانیت لە هێڵدا بیخەیتە ناو هێڵەوە، لە فایلێکەوە هاوردەی بکەیت، لە APIیەکەوە بیهێنیت، یان لە ستوونی بنکەدراوەدا هەڵیبگریت و لە کاتی جێبەجێکردندا ئاوی بدەیت. هەمان فۆرم، وەک داتا لێرەدا هەمان فۆرم هەیە، ئەمجارەیان وەک ئۆبجێکتی JSON دەربڕدراوە. سکیما هەموو شتێک پێناسە دەکات: پێکهاتە، چەسپاندن، یاساکانی بینین، حیساباتی وەرگیراو، گەشتکردنی لاپەڕە — و دەیخاتە دەست مۆدێلێک کە لە کاتی جێبەجێکردندا هەڵسەنگاندنی بۆ دەکات. لێرەدا ئەوە بە تەواوی چۆنە:
export const surveySchema = { title: "Order Flow", showProgressBar: "سەرەوە", لاپەڕەکان: [ { ناو: "وردەکارییەکان", توخمەکان: [ { جۆر: "دەق", ناو: "ناوی یەکەم", پێویستە: ڕاست }, { جۆر: "دەق", ناو: "ئیمەیڵ", inputType: "ئیمەیڵ", isRequired: true, validators: [{ جۆر: "ئیمەیڵ", دەق: "ئیمەیڵی نادروست" }] } ] }, { ناو: "فەرمان"، توخمەکان: [ { جۆر: "دەق"، ناو: "نرخ"، جۆری هاتنەژوورەوە: "ژمارە", بەهای پێشوەختە: 0 }, { جۆر: "دەق"، ناو: "ژمارە"، جۆری هاتنەژوورەوە: "ژمارە", بەهای پێشوەختە: 1 }, { جۆر: "دابەزین",ناو: "ڕێژەی باج"، بەهای پێشوەختە: 0.1، هەڵبژاردنەکان: [ { بەها: 0.05، دەق: "5%" }، { بەها: 0.1، دەق: "10%" }، { بەها: 0.15، دەق: "15%" } ] }، { جۆر: "دەربڕین"، ناو: "ژێرکۆی گشتی"، دەربڕین: "{نرخ} {ژمارەیی}" }، { جۆر: "دەربڕین", ناو: "باج", دەربڕین: "{ژێرکۆی گشتی} {ڕێژەی باج}" }, { جۆر: "دەربڕین", ناو: "کۆی گشتی", دەربڕین: "{کۆی گشتی} + {باج}" } ] }, { ناو: "ئەژمێر", توخمەکان: [ { جۆر: "گرووپی ڕادیۆیی", ناو: "حسابی هەیە", هەڵبژاردنەکان: ["بەڵێ", "نەخێر"] }, { جۆر: "دەق"، ناو: "ناوی بەکارهێنەر", visibleIf: "{hasAccount} = 'بەڵێ'", isRequired: true }, { جۆر: "دەق", ناو: "وشەی نهێنی", inputType: "وشەی نهێنی", visibleIf: "{hasAccount} = 'بەڵێ'", isRequired: true, validators: [{ type: "text", minLength: 6, text: "Min 6 characters" } ] }, { جۆر: "هەڵسەنگاندن", ناو: "ڕازیبوون", rateMin: 1, rateMax: 5 }, { جۆر: "سەرنجدان", ناو: "پێداچوونەوە ئەرێنی", visibleIf: "{ڕەزامەندی} >= 4" }, { جۆر: "سەرنجدان", ناو: "پێداچوونەوە باشترکردن", visibleIf: "{ڕەزامەندی} <= 2" } ] }, { ناو: "پێداچوونەوە"، visibleIf: "{کۆی گشتی} >= 100", توخمەکان: [] } ]};
بۆ ساتێک ئەمە بەراورد بکە بە وەشانی RHF.
بلۆکی superRefine کە بە مەرج ناوی بەکارهێنەر و وشەی نهێنی پێویست بوو نەماوە. visibleIf: "{hasAccount} = 'بەڵێ'" تێکەڵکراوە لەگەڵ isRequired: true هەردوو نیگەرانییەکە پێکەوە مامەڵەی لەگەڵ دەکات، لەسەر خودی مەیدانەکە، کە چاوەڕێی ئەوە دەکەیت بیاندۆزیتەوە. زنجیرەی useWatch + useMemo کە ژێرکۆی گشتی، باج و کۆی گشتی حیساب کردووە بە سێ بواری دەربڕین جێگیر دەکرێت کە بە ناو ئاماژە بە یەکتر دەکەن. مەرجی لاپەڕەی پێداچوونەوە، کە لە وەشانی RHF تەنها بە شوێنپێهەڵگرتن لە ڕێگەی showSubmit، لقی ڕەندەری هەنگاوی ٣، دووبارە بنیات نراوەتەوە. و لە کۆتاییدا، لۆژیکی دوگمەی nav تاکە تایبەتمەندی visibleIf ە لەسەر ئۆبجێکتی لاپەڕەکە.
هەمان لۆژیک هەیە. تەنها ئەوەیە کە سکیما شوێنێکی پێدەبەخشێت بۆ ژیانی لەو شوێنەی کە بە گۆشەگیری دیار بێت، نەک بەسەر پێکهاتەکەدا بڵاوبێتەوە. هەروەها تێبینی بکە کە سکیما جۆری: 'دەربڕین' بۆ ژێرکۆی گشتی، باج و کۆی گشتی بەکاردەهێنێت. دەربڕین تەنها بۆ خوێندنەوەیە و بە شێوەیەکی سەرەکی بۆ پیشاندانی بەها حیسابکراوەکان بەکاردێت. هەروەها SurveyJS پشتگیری لە جۆری: 'html' دەکات بۆ ناوەڕۆکی ئیستاتیک، بەڵام بۆ بەها حیسابکراوەکان، دەربڕین هەڵبژاردەیەکی دروستە. ئێستا بۆ لایەنی React. ڕێندەرکردن و پێشکەشکردن زۆر سادەیە. بە هەمان شێوە وایەر onComplete بۆ API ی خۆت — لە ڕێگەی useMutation یان هێنانی سادە:
import { useState, useEffect, useRef } لە "react";import { useMutation } لە "@tanstack/react-query";import { مۆدێل } لە "survey-core";import { Survey } لە "survey-react-ui";import "survey-core/survey-core.css";
فەنکشنی هەناردەکردن SurveyForm () { const [مۆدێل] = useState (() => مۆدێلی نوێ (Schema ڕاپرسی));
const گۆڕانکاری = بەکارهێنانی گۆڕانکاری ({ mutationFn: async (داتا) => { const res = چاوەڕوان بن fetch("/api/orders", { شێواز: "POST"، headers: { "جۆری ناوەڕۆک": "بەرنامە/json" }, جەستە: JSON.stringify (داتا)، }); if (!res.ok) throw new Error("ناردنی شکستی هێنا"); گەڕانەوەی res.json (); }، });
const mutationRef = بەکارهێنانیRef (گۆڕانکاری); mutationRef.current = گۆڕانکاری؛ useEffect(() => { const handler = (نێرەر) => mutationRef.current.mutate(نێرەر.داتا); مۆدێل.onComplete.add(handler); return () => model.onComplete.remove(handler); }, [model]); // ref خۆی لە دووبارە تۆمارکردنەوەی مامەڵەکار دەپارێزێت لە هەر ڕەندەرێکدا (ناسنامەی شتەکانی گۆڕانکاری دەگۆڕێت)
گەڕانەوە ( <> <مۆدێلی ڕاپرسی={مۆدێل} /> {گۆڕانکاری.هەڵەیە &&
سەیری Pen SurveyJS-03-SurveyJS بکە [forked] بە شەش لەناوچوون.
onComplete ئاگر دەکاتەوە کاتێک بەکارهێنەر دەگاتە کۆتایی دوا لاپەڕەی بینراو. کەواتە ئەگەر کۆی گشتی هەرگیز 100 نەبڕێت و لاپەڕەی پێداچوونەوەکە بەجێبهێڵرێت، ئەوا هێشتا بە دروستی تەقە دەکات چونکە SurveyJS پێش ئەوەی بڕیار بدات کە "دوا لاپەڕە" مانای چییە، بینین هەڵدەسەنگێنێت. پاشان، sender.data هەموو وەڵامەکان لەگەڵ بەها حیسابکراوەکان (کۆی گشتی، باج، کۆی گشتی) وەک بواری پلە یەک لەخۆدەگرێت، بۆیە باری سوودبەخشی API هاوشێوەی ئەوەیە کە وەشانی RHF بە دەستی لە onSubmit کۆیکردۆتەوە. ەکەنەخشی mutationRef هەمان ئەو نەخشەیە کە تۆ دەستت پێدەگات بۆ هەر شوێنێک کە پێویستت بە مامەڵەکاری ڕووداوێکی جێگیرە لەسەر بەهایەک کە لە هەموو ڕەندەرێکدا دەگۆڕێت — هیچ شتێکی تایبەت بە SurveyJS لەو بارەیەوە.
پێکهاتەی React بە هیچ شێوەیەک هیچ لۆژیکی بازرگانی لەخۆناگرێت. هیچ useWatch نییە، هیچ JSXێکی مەرجدار نییە، هیچ ژمێرەری هەنگاوێک نییە، هیچ زنجیرەیەکی useMemo نییە، هیچ superRefine نییە. React ئەو کارە دەکات کە لە ڕاستیدا لێی باشە: ڕەندەری پێکهاتەیەک و وایەرکردنی بۆ پەیوەندی API. چی لە کاردانەوە دەرچوو؟
نیگەرانی RHF Stack ڕاپرسیJS بینین لقەکانی JSX visibleIf بەها وەرگیراوەکان useWatch / useMemo دەربڕین یاساکانی cross-field superRefine بکە مەرجەکانی شێما گەشتکردن دۆخی هەنگاو لاپەڕە visibleIf شوێنی یاسا بەسەر فایلەکاندا دابەشکراوە ناوەندی لە سکیمادا
ئەوەی لە React دەمێنێتەوە بریتییە لە داڕشتن و ستایل و وایەرکردنی پێشکەشکردن و یەکخستنی ئەپەکان، واتە ئەو شتانەی کە React لە ڕاستیدا بۆی دیزاین کراوە. هەموو شتێکی تر گواسترایەوە بۆ ناو سکیماکە و لەبەر ئەوەی سکیما تەنها ئۆبجێکتی JSON یە، دەتوانرێت لە بنکەدراوەیەکدا هەڵبگیرێت، بە شێوەیەکی سەربەخۆ لە کۆدی بەرنامەکەت وەشانی بکرێت، یان لە ڕێگەی ئامرازی ناوخۆییەوە دەستکاری بکرێت بەبێ ئەوەی پێویستی بە بڵاوکردنەوە هەبێت. بەڕێوەبەری بەرهەمێک کە پێویستی بە گۆڕینی ئەو ئاستەنگەیە کە لاپەڕەی پێداچوونەوەکە دەستپێدەکات دەتوانێت ئەوە بکات بەبێ ئەوەی دەست لە پێکهاتەکە بدات. ئەوە جیاوازییەکی مانادارە لە بواری کارکردندا بۆ ئەو تیمانەی کە ڕەفتاری فۆرم زۆرجار پەرەدەستێنێت و هەمیشە لەلایەن ئەندازیارەکانەوە بەڕێوەناچێت. کەی هەر ڕێگایەک بەکاربهێنین؟ لێرەدا یاسایەکی باش هەیە کە بۆ من کاردەکات: بیهێنە بەرچاوت کە فۆڕمەکە بە تەواوی بسڕیتەوە. چیت لەدەست دەدا؟
ئەگەر شاشەکان بێت، تۆ فۆڕمی پێکهاتەکانت دەوێت. ئەگەر لۆژیکی بازرگانی بێت، وەک ئاستەکان، یاساکانی لقکردن و پێداویستییە مەرجدارەکان کە بڕیارە ڕاستەقینەکان کۆد دەکەن، تۆ بزوێنەری سکیمات دەوێت.
بە هەمان شێوە ئەگەر ئەو گۆڕانکاریانەی کە بە ڕێگاکەتدا دێن زیاتر سەبارەت بە لیبێڵ و مەیدان و نەخشە بێت، RHF بە باشی خزمەتت دەکات. ئەگەر ئەوان سەبارەت بە مەرجەکان، دەرەنجامەکان و یاساکانن کە ڕەنگە تیمی ئۆپس یان تیمی یاسایی تۆ پێویستیان بە ڕێکخستنی لە پاشنیوەڕۆی سێشەممەدا بەبێ تۆمارکردنی بلیت، مۆدێلی سکیما لەگەڵ SurveyJS ڕاستگۆترە. ئەم دوو ڕێبازە لە ڕاستیدا لە کێبڕکێی یەکتردا نین. ئەوان باس لە چینە جیاوازەکانی کێشە دەکەن، و ئەو هەڵەیەی کە شایەنی دوورکەوتنەوەیە، نەگونجاندنی ئەبستراکتەکە لەگەڵ قورسایی لۆژیکەکەدا — مامەڵەکردن لەگەڵ سیستەمێکی یاسادا وەک پێکهاتەیەک چونکە ئەوە ئامرازە ئاشناکە، یان دەستڕاگەیشتن بە بزوێنەری سیاسەت چونکە فۆرمێک گەشەی کرد بۆ سێ هەنگاو و بوارێکی مەرجداری بەدەستهێنا. ئەو فۆرمەی لێرەدا دروستمان کردووە بە ئەنقەست لە نزیک سنوورەکە دادەنیشێت، ئەوەندە ئاڵۆزە کە جیاوازییەکە ئاشکرا بکات بەڵام ئەوەندە توندڕەو نییە کە بەراوردکردنەکە هەست بە ساختەکاری بکات. زۆربەی فۆرمەکانی ڕاستەقینە کە لە بنکەدراوەی کۆدەکانتدا نائاسایی بوون، ڕەنگە لە نزیک هەمان سنوور دابنیشن، و پرسیارەکە بەزۆری تەنها ئەوەیە کە ئایا کەسێک ناوی هێناوە کە لە ڕاستیدا چییە. فۆڕمی React Hook + Zod بەکاربهێنە کاتێک:
فۆرمەکان ئاراستەی CRUDن؛ لۆژیک قووڵە و بە UI بەڕێوەدەبرێت؛ ئەندازیاران خاوەنی هەموو ڕەفتارێکن؛ باکئەند وەک سەرچاوەی ڕاستی دەمێنێتەوە.
SurveyJS بەکاربهێنە کاتێک:
فۆڕمەکان بڕیارەکانی بازرگانی کۆد دەکەن؛ یاساکان سەربەخۆ لە UI پەرەدەسەنن؛ لۆژیک دەبێت دیار بێت، وردبینی بکرێت، یان وەشانی هەبێت؛ ئەو کەسانەی کە ئەندازیار نین کاریگەرییان لەسەر ڕەفتارەکان هەیە؛ هەمان فۆرم دەبێت لە چەندین پێشەوەدا بڕوات.
