דער אַרטיקל איז באצאלטע דורך SurveyJS
עס איז אַ גייַסטיק מאָדעל וואָס רובֿ רעאַקט דעוועלאָפּערס טיילן אָן טאָמיד דיסקאַסט עס הויך. אַז פארמען זענען שטענדיק געמיינט צו זיין קאַמפּאָונאַנץ. דעם מיטל אַ אָנלייגן ווי:
רעאַגירן כאָק פאָרם פֿאַר היגע שטאַט (מינימום שייַעך-רענדערז, ערגאַנאַמיק פעלד רעגיסטראַציע, ימפּעראַטיוו ינטעראַקשאַן).
זאָד פֿאַר וואַלאַדיישאַן (אַרייַן קערעקטנאַס, גרענעץ וואַלאַדיישאַן, טיפּ-זיכער פּאַרסינג).
רעאַגירן אָנפֿרעג פֿאַר באַקענד: סאַבמישאַן, ריטריעס, קאַטשינג, סערווער סינק, און אַזוי אויף.
און פֿאַר די וואַסט מערהייַט פון פארמען - דיין לאָגין סקרינז, דיין סעטטינגס בלעטער, דיין CRUD מאָדאַלז - דאָס אַרבעט טאַקע גוט. יעדער שטיק טוט זיין אַרבעט, זיי קאַמפּאָוז ריין, און איר קענען מאַך אויף צו די פּאַרץ פון דיין אַפּלאַקיישאַן וואָס אַקשלי דיפערענשיייט דיין פּראָדוקט.
אָבער יעדער מאָל אין אַ בשעת, אַ פאָרעם סטאַרץ אַקיומיאַלייטינג זאכן ווי וויזאַביליטי כּללים וואָס אָפענגען אויף פריער ענטפֿערס, אָדער דערייווד וואַלועס וואָס קאַסקייד דורך דריי פעלדער. אפֿשר אפילו גאַנץ בלעטער וואָס זאָל זיין סקיפּט אָדער געוויזן באזירט אויף אַ פליסנדיק גאַנץ.
איר שעפּן דער ערשטער קאַנדישאַנאַל מיט אַ UseWatch און אַן ינלינע צווייַג, וואָס איז פייַן. דערנאָך אנדערן. דערנאָך איר באַקומען סופּעררעפין צו ענקאָוד קרייַז-פעלד כּללים וואָס דיין Zod סטשעמאַ קענען נישט אויסדריקן אויף אַ נאָרמאַל וועג. דערנאָך, שריט נאַוויגאַציע סטאַרץ ליקינג געשעפט לאָגיק. אין עטלעכע פונט, איר קוק אין וואָס איר האָט געבויט און פאַרשטיין אַז די פאָרעם איז נישט טאַקע UI ענימאָר. עס איז מער פון אַ באַשלוס פּראָצעס, און דער קאָמפּאָנענט בוים איז פּונקט ווו איר געטראפן צו קראָם עס.
דאָס איז ווו איך טראַכטן די גייַסטיק מאָדעל פֿאַר פארמען אין רעאַקט ברייקס אַראָפּ, און עס איז טאַקע קיינער ס שולד. די RHF + Zod אָנלייגן איז ויסגעצייכנט אין וואָס עס איז דיזיינד פֿאַר. די פּראָבלעם איז אַז מיר טענד צו נוצן עס נאָך די פונט ווו די אַבסטראַקציעס גלייַכן דעם פּראָבלעם ווייַל די אָלטערנאַטיוו ריקווייערז אַ גאָר אַנדערש וועג פון טראכטן וועגן פארמען.
דער אַרטיקל איז וועגן דעם אנדער ברירה. צו ווייַזן דעם, מיר בויען די פּינטלעך זעלביקער מולטי-שריט פאָרעם צוויי מאָל:
מיט React Hook Form + Zod ווייערד צו רעאַקט אָנפֿרעג פֿאַר סאַבמישאַן,
מיט SurveyJS, וואָס באהאנדלט אַ פאָרעם ווי דאַטן - אַ פּשוט JSON סטשעמאַ - אלא ווי אַ קאָמפּאָנענט בוים.
זעלביקער באדערפענישן, זעלביקער קאַנדישאַנאַל לאָגיק, זעלביקער אַפּי רופן אין די סוף. דערנאָך מיר וועלן מאַפּע פּונקט וואָס איז אריבערגעפארן און וואָס סטייד, און שטעלן אַ פּראַקטיש וועג צו באַשליסן וואָס מאָדעל איר זאָל נוצן און ווען.
די פאָרעם וואָס מיר בויען:
דעם פאָרעם וועט נוצן אַ 4-שריט לויפן:
שריט 1: דעטאַילס
ערשטער נאָמען (פארלאנגט),
Email (פארלאנגט, גילטיק פֿאָרמאַט).
שריט 2: סדר
יחיד פרייז,
כמות,
שטייער ראטע,
דערייווד:
סובטאָטאַל,
שטייער,
גאַנץ.
שריט 3: אַקאַונט און באַמערקונגען
צי איר האָבן אַ חשבון? (יא / ניין)
אויב יאָ → נאמען + פּאַראָל, ביידע פארלאנגט.
אויב ניין → בליצפּאָסט שוין געזאמלט אין שריט 1.
צופֿרידנקייט ראַנג (1-5)
אויב ≥ 4 → פרעגן "וואָס האָט איר ווי?"
אויב ≤ 2 → פרעגן "וואָס קענען מיר פֿאַרבעסערן?"
שריט 4: איבערבליק
עס איז בלויז אויב גאַנץ >= 100
לעצט סאַבמישאַן.
דאָס איז נישט עקסטרעם. אבער עס איז גענוג צו ויסשטעלן אַרקאַטעקטשעראַל דיפעראַנסיז.
טייל 1: קאָמפּאָנענט-געטריבן (רעאַקט כאָק פאָרעם + זאָד)
ייַנמאָנטירונג
npm ינסטאַלירן react-hook-form zod @hookform/resolvers @tanstack/react-query
Zod Schema
לאָמיר אָנהייבן מיט די Zod סטשעמאַ, ווייַל דאָס איז יוזשאַוואַלי ווו די פאָרעם פון די פאָרעם איז געגרינדעט. פֿאַר די ערשטע צוויי סטעפּס - פערזענלעכע דעטאַילס און סדר ינפּוץ - אַלץ איז סטרייטפאָרווערד: פארלאנגט סטרינגס, נומערן מיט מינימאַמז, און אַ נומער. די טשיקאַווע טייל סטאַרץ ווען איר פּרובירן צו אויסדריקן די קאַנדישאַנאַל כּללים.
אַרייַנפיר {ז} פֿון "זאָד";
עקספּאָרט קאָנסט פאָרםסטשעמאַ = z.object({ firstName: z.string().מין(1, "פארלאנגט"), בליצפּאָסט: z.string().email("ינוואַליד בליצפּאָסט"), פּרייַז: ז.נומער().מין(0), קוואַנטיטי: ז.נומער().מין(1), טאַקסראַטע: ז.נומער(), האט אַקאַונט: ז.ענום (ניין"),(יאָס), באַניצער נאָמען: "נאָמען"(י). שפּריכוואָרט: ז.סטרינג().אָפּטיאָנאַל(), צופֿרידנקייט: ז.נומער().מין(1).מאַקס(5), פּאָזיטיווע באַמערקונגען: ז.סטרינג().אָפּטיאָנאַל(), פֿאַרבעסערונג באַמערקונגען: ז.סטרינג().אָפּטיאָנאַל(),}). ctx.addIssue({ קאָד: "קאַסטאַם", דרך: ["באַניצער נאָמען"], אָנזאָג: "פארלאנגט"} } אויב (!data.password || data.password.length <6) {ctx.addIssue({ קאָד: "קאַסטאַם", דרך: ["שפּריכוואָרט"});
אויב (data.satisfaction>= 4 && !data.positiveFeedback) {ctx.addIssue({קאָד: "קאַסטאַם", דרך: ["positiveFeedback"], אָנזאָג: "ביטע טיילן וואָס איר לייקט"}); }
אויב (דאַטאַ.צופֿרידנקייט <= 2 &&!דאַטאַ.ימפּראָוועמענטפעעדבאַקק) {קטקס.אַדדייססוע ({קאָד: "קאַסטאַם", דרך:["פֿאַרבעסערונג באַמערקונגען"], אָנזאָג: "ביטע זאָגן אונדז וואָס צו פֿאַרבעסערן" }); }});
אַרויספירן טיפּ פאָרמדאַטאַ = ז.ינפער <טיפּ פון פאָרמסטשעמאַ>;
נאָטיץ אַז נאמען און פּאַראָל זענען טייפּט ווי אַפּשאַנאַל () אפילו כאָטש זיי זענען קאַנדישאַנאַלי פארלאנגט ווייַל Zod ס טיפּ-מדרגה סטשעמאַ באשרייבט די פאָרעם פון די כייפעץ, נישט די כּללים וואָס רעגירן ווען פעלדער ענין.
די קאַנדישאַנאַל פאָדערונג מוזן לעבן אין סופּעררעפינע, וואָס לויפט נאָך די פאָרעם איז וואַלאַדייטאַד און האט אַקסעס צו די פול כייפעץ. אַז צעשיידונג איז נישט אַ פעלער; דאָס איז פּונקט וואָס די געצייַג איז דיזיינד פֿאַר: סופּעררעפינע איז ווו קרייַז-פעלד לאָגיק גייט ווען עס קענען ניט זיין אויסגעדריקט אין די סטשעמאַ סטרוקטור זיך.
וואָס איז אויך נאָוטאַבאַל דאָ איז וואָס דעם סכעמע טוט נישט אויסדריקן. עס האט קיין באַגריף פון בלעטער, קיין באַגריף פון וואָס פעלדער זענען קענטיק אין וואָס פונט, און קיין באַגריף פון נאַוויגאַציע. דאָס אַלץ וועט לעבן ערגעץ אַנדערש.
פאָרעם קאָמפּאָנענט
אַרייַנפיר {useForm, useWatch} פֿון "react-hook-form"; אַרייַנפיר {zodResolver} פֿון "@hookform/resolvers/zod"; אַרייַנפיר {useMutation} פֿון "@tanstack/react-query"; אַרייַנפיר {useState, useMemo} פֿון "react";import {formaschema}, פֿון "Form.
const STEPS = ["פרטים", "סדר", "חשבון", "אָפּשאַצונג"];
טיפּ אָרדערפּייַלאָאַד = פאָרמדאַטאַ & { סובטאָטאַל: נומער; שטייַער: נומער; גאַנץ: נומער };
אַרויספירן פֿונקציע RHFMultiStepForm () {const [סטעפּ, setStep] = useState (0);
קאָנסט מיוטיישאַן = נוצן מיוטיישאַן ({
mutationFn: אַסינק (פּיילאָוד: אָרדערפּאַילאָאַד) => {
const res = await fetch ("/ אַפּי / אָרדערס", {
אופֿן: "POST",
כעדערז: { "Content-Type": "אַפּפּליקאַטיאָן / דזשסאָן" },
גוף: JSON.stringify(פּיילאָוד),
});
אויב (!res.ok) וואַרפן נייַ טעות ("ניט אַנדערש צו פאָרלייגן");
צוריקקומען רעס.דזשסאָן ();
},
});
const { רעגיסטרירן, קאָנטראָל, האַנדלעSubmit, formState: { ערראָרס }, } = useForm ({ רעסאָלווער: zodResolver (formSchema), default וואַלועס: {פּרייַז: 0, קוואַנטיטי: 1, שטייער ראַטע: 0.1, צופֿרידנקייט: 3, hasAccount: "ניין", }, });
קאָנסט פּרייַז = useWatch ({ קאָנטראָל, נאָמען: "פּרייַז"}); קאָנסט קוואַנטיטי = useWatch ({ קאָנטראָל, נאָמען: "קוואַנטיטי"}); const taxRate = useWatch ({ קאָנטראָל, נאָמען: "טאַקסראַטע"}); const hasAccount = useWatch ({ קאָנטראָל, נאָמען: "hasAccount"}); קאָנסט צופֿרידנקייט = useWatch ({ קאָנטראָל, נאָמען: "צופֿרידנקייט"});
קאָנסט סובטאָטאַל = useMemo (() => (פּרייַז ?? 0) * (קוואַנטיטי ?? 1), [פּרייַז, קוואַנטיטי]); קאָנסט שטייַער = נוצן מעמאָ (() => סובטאָטאַל * (טאַקסראַטע ?? 0), [סובטאָטאַל, טאַקסראַטע]); קאָנסט גאַנץ = useMemo (() => סובטאָטאַל + שטייַער, [סובטאָטאַל, שטייַער]);
const onSubmit = (דאַטן: FormData) => מוטאַטיאָן.מוטאַטע ({...דאַטן, סובטאָטאַל, שטייַער, גאַנץ});
const showSubmit = (שריט === 2 && גאַנץ <100) || (שריט === 3 && גאַנץ >= 100)
צוריקקומען (
{mutation.isError &&
טעות: {מוטאַטיאָן.ערר.מעססאַגע}
} );}
זען די Pen SurveyJS-03-RHF [פאָרקעד] דורך זעקסטעקסטינגקטיאָן.
עס איז גאַנץ אַ פּלאַץ געשעעניש דאָ, און עס איז ווערט סלאָוינג אַראָפּ צו באַמערקן ווו די ענדיקט זיך.
די דערייווד וואַלועס - סובטאָטאַל, שטייַער, גאַנץ - זענען קאַמפּיוטאַד אין די קאָמפּאָנענט דורך useWatch און useMemo ווייַל זיי אָפענגען אויף לעבן פעלד וואַלועס און עס איז קיין אנדערע נאַטירלעך אָרט פֿאַר זיי.
די וויזאַביליטי כּללים פֿאַר נאמען, פּאַראָל, positive באַמערקונגען און פֿאַרבעסערונג באַמערקונגען לעבן אין JSX ווי ינלינע קאַנדישאַנאַל.
די סטעפּ-סקיפּינג לאָגיק - די אָפּשאַצונג בלאַט איז בלויז אנטפלעקט ווען גאַנץ >= 100 - איז עמבעדיד אין די ווייַזן סובמיט בייַטעוודיק און די רענדער צושטאַנד אויף שריט 3.
נאַוויגאַציע זיך איז נאָר אַ נוצן-סטייט טאָמבאַנק וואָס מיר ינקראַמאַנטינג מאַניואַלי.
React Query כאַנדאַלז ריטריוז, קאַטשינג און ינוואַלאַדיישאַן. די פאָרעם נאָר רופט מוטאַטיאָן.מוטאַטע מיט וואַלאַדייטאַד דאַטן.
קיין פון דעם איז פאַלש, פּער סיי. דאָס איז נאָך אידיאָמאַטיק רעאַקט, און דער קאָמפּאָנענט איז גאַנץ פּערפאָרמינג דאַנק צו ווי RHF יזאָלייץ שייַעך-רענדערז.
אָבער אויב איר וואָלט געבן דעם צו עמעצער וואס האט נישט געשריבן עס און פרעגן זיי צו דערקלערן אונטער וואָס טנאָים די אָפּשאַצונג בלאַט איז ארויס, זיי וואָלט האָבן צו שפּור דורך ShowSubmit, די סטעפּ 3 רענדערינג צושטאַנד און די נאַוו קנעפּל לאָגיק - דריי באַזונדער ערטער - צו רעקאָנסטרוירן אַ הערשן וואָס קען זיין סטייטיד אין איין שורה.
די פאָרעם אַרבעט, יאָ, אָבער די נאַטור איז נישט טאַקע ינספּעקטאַבאַל ווי אַ סיסטעם. עס האט צו זיין עקסאַקיוטאַד מענטאַלי.
מער ימפּאָרטאַנטלי, טשאַנגינג עס ריקווייערז ינזשעניעריע ינוואַלוומאַנט. אפילו אַ קליין טוויק, ווי אַדזשאַסטינג ווען די רעצענזיע שריט איז געוויזן, מיטל עדיטינג די קאָמפּאָנענט, אַפּדייטינג וואַלאַדיישאַן, עפן אַ ציען בעטן, ווארטן פֿאַר אָפּשאַצונג און דיפּלייינג ווידער.
טייל 2: סכעמע-געטריבן (SurveyJS)
איצט לאָזן ס בויען די זעלבע לויפן ניצן אַ סטשעמאַ.
ייַנמאָנטירונג
npm ינסטאַלירן יבערבליק-האַרץ יבערבליק-רעאַגירן-וי @tanstack/react-query
יבערבליק-core די MIT-לייסאַנסט פּלאַטפאָרמע-פרייַ רונטימע מאָטאָר וואָס מאַכט די פאָרעם פון SurveyJS - דער טייל וואָס מיר זאָרגן וועגן דאָ. עס נעמט אַ JSON סטשעמאַ, בויען אַן ינערלעך מאָדעל פון עס, און כאַנדאַלז אַלץ וואָס אַנדערש וואָלט לעבן אין דיין רעאַקט קאָמפּאָנענט: עוואַלואַטינג וויזאַביליטי אויסדרוקן, קאַמפּיוטינג דערייווד וואַלועס, אָנפירונג בלאַט שטאַט, טראַקינג וואַלאַדיישאַן, און באַשליסן וואָס "גאַנץ" מיטל געגעבן וואָס בלעטער זענען פאקטיש געוויזן.
survey-react-ui די וי / רענדערינג שיכטע וואָס קאַנעקץ דעם מאָדעל צו רעאַקט. עס איז יסענשאַלי אַ <סורוויי מאָדעל = {מאָדעל} /> קאָמפּאָנענט וואָס שייַעך-רענדערז ווען די מאָטאָר ס שטאַט ענדערונגען. SurveyJS UI לייברעריז זענען אויך בנימצא פֿאַר Angular, Vue3 און פילע אנדערע פראַמעוואָרקס.
צוזאַמען, זיי געבן איר אַ פולשטענדיק פאַנגקשאַנאַל, מאַלטי-בלאַט פאָרעם רונטימע אָן שרייבן אַ איין שורה פון קאָנטראָל לויפן.
די סטשעמאַ פֿאָרמאַט זיך איז, ווי געזאָגט פריער, נאָר אַ JSON - קיין DSL אָדער עפּעס פּראַפּרייאַטערי. איר קענען ינלינע עס, אַרייַנפיר עס פֿון אַ טעקע, ברענגען עס פֿון אַן אַפּי, אָדער קראָם עס אין אַ דאַטאַבייס זייַל און כיידרייט עס אין רונטימע.
דער זעלביקער פאָרעם, ווי דאַטן
דאָ איז דער זעלביקער פאָרעם, דאָס מאָל אויסגעדריקט ווי אַ JSON כייפעץ. די סטשעמאַ דיפיינז אַלץ: סטרוקטור, וואַלאַדיישאַן, וויזאַביליטי כּללים, דערייווד חשבונות, בלאַט נאַוויגאַציע - און גיט עס צו אַ מאָדעל וואָס יוואַליוייץ עס ביי רונטימע. דאָ ס וואָס דאָס קוקט ווי אין פול:
export const surveySchema = { טיטל: "אָרדער פלאָו", ווייַזן פּראָגרעסבאַר: "שפּיץ", בלעטער: [ { נאָמען: "דעטאַילס", עלעמענטן: [ { טיפּ: "טעקסט", נאָמען: "פירסטנאַמע", איז רעקווירעד: אמת }, { טיפּ: "טעקסט", נאָמען: "עמאַיל", אַרייַנשרייַב טיפּ: "עמאַיל", איז רעקווירעד: אמת, "וואַלידיאַטאָרס", "{טיפּ": טעקסט: "וואַלידימען:" }, { נאָמען: "סדר", עלעמענטן: [{ טיפּ: "טעקסט", נאָמען: "פּרייַז", inputType: "נומער", defaultValue: 0 }, { טיפּ: "טעקסט", נאָמען: "קוואַנטיטי", inputType: "נומער", defaultValue: 1}, { טיפּ: "דראָפּדאָוון",נאָמען: "טאַקסראַטע", defaultValue: 0.1, ברירות: [{ ווערט: 0.05, טעקסט: "5%" }, {ווערט: 0.1, טעקסט: "10%" }, {ווערט: 0.15, טעקסט: "15%" } }, {טיפּ: "אויסדרוק", נאָמען: "קוואַנטיטי {קוואַנטיטי}}} טיפּ: "קוואַנטיטי {קוואַנטיטי}} טיפּ: "אויסדרוק", נאָמען: "שטייַער", אויסדרוק: "{ סובטאָטאַל} {טאַקסראַטע}" }, { טיפּ: "אויסדרוק", נאָמען: "גאַנץ", אויסדרוק: "{ סובטאָטאַל} + {שטייַער}" } ] }, { נאָמען: "חשבון", עלעמענטן: [ { טיפּ: "ראַדיאָגרופּע", נאָמען: "האט אַקאַונט", ברירות: [": יאָ", "נאָמען", "נאָמען", "נאָמען", "נאָמען" visibleIf: "{hasAccount} = 'יא'", איז רעקווירעד: אמת }, {טיפּ: "טעקסט", נאָמען: "פּאַראָל", inputType: "password", visibleIf: "{hasAccount} = 'יא'", איז רעקווירעד: אמת, וואַלאַדייטערז: [{ טיפּ: "טעקסט", מיןלענגטה: "6, טעקסטן: "מין: טיפּ, נאָמען", טעקסט, "מין:ר", "צופֿרידנקייט", קורסמינן: 1, קורסמאַקס: 5}, {טיפּ: "קאָמענטאַר", נאָמען: "positiveFeedback", visibleIf: "{צופֿרידנקייט} >= 4" }, {טיפּ: "קאָמענטאַר", נאָמען: "פֿאַרבעסערונגFeedback", visibleIf: "{צופֿרידנקייט} "{צופֿרידנקייט} "{צופֿרידנקייט} "{צופֿרידנקייט} "{צופֿרידנקייט} <= 2", {}, וויזיבלע >= 100", עלעמענטן: [] } ]};
פאַרגלייַכן דעם צו די RHF ווערסיע פֿאַר אַ מאָמענט.
די סופּעררעפינע בלאָק אַז קאַנדישאַנאַלי פארלאנגט נאמען און פּאַראָל איז ניטאָ. visibleIf: "{hasAccount} = 'יא'" קאַמביינד מיט isRequired: אמת כאַנדאַלז ביידע קאַנסערנז צוזאַמען, אויף די פעלד זיך, ווו איר וואָלט דערוואַרטן זיי צו געפֿינען.
די קייט פון UseWatch + UseMemo וואָס קאַמפּיוטיד סובטאָטאַל, שטייַער און גאַנץ איז ריפּלייסט דורך דריי אויסדרוק פעלדער וואָס רעפערירן יעדער אנדערע דורך נאָמען.
די רעצענזיע בלאַט צושטאַנד, וואָס אין די RHF ווערסיע איז געווען ריקאַנסטראַקטאַבאַל בלויז דורך טרייסינג דורך ShowSubmit, די טרעפּ 3 רענדער צווייַג.
און לעסאָף, די נאַוו קנעפּל לאָגיק איז אַ איין visibleIf פאַרמאָג אויף די בלאַט כייפעץ.
די זעלבע לאָגיק איז דאָרט. עס איז נאָר אַז די סטשעמאַ גיט עס אַ פּלאַץ צו לעבן ווו עס איז קענטיק אין אפגעזונדערטקייט, אלא ווי פאַרשפּרייטן איבער די קאָמפּאָנענט.
אויך, טאָן אַז די סכעמע ניצט טיפּ: 'אויסדרוק' פֿאַר סובטאָטאַל, שטייַער און גאַנץ. אויסדרוק איז בלויז לייענען און איז געניצט דער הויפּט צו ווייַזן קאַלקיאַלייטיד וואַלועס. SurveyJS אויך שטיצט טיפּ: 'html' פֿאַר סטאַטיק אינהאַלט, אָבער פֿאַר קאַלקיאַלייטיד וואַלועס, אויסדרוק איז די רעכט ברירה.
איצט פֿאַר די רעאַקט זייַט.
רענדערינג און סאַבמישאַן
זייער פּשוט. דראָט אויף קאָמפּלעטע צו דיין אַפּי די זעלבע וועג - דורך UseMutation אָדער קלאָר ברענגען:
אַרייַנפיר {useState, useEffect, useRef } פֿון "רעאַקט"; אַרייַנפיר {useMutation} פֿון "@tanstack/react-query"; אַרייַנפיר {מאָדעל } פֿון "סורוויי-האַרץ"; אַרייַנפיר { יבערבליק } פֿון "סורוויי-רעאַקט-וי"; אַרייַנפיר "סורוויי-האַרץ / יבערבליק"-סערוועי;
אַרויספירן פֿונקציע סורווייפאָרם () { קאָנסט [מאָדעל] = useState (() => נייַ מאָדעל (סורווייסטשעמאַ));
קאָנסט מיוטיישאַן = נוצן מיוטיישאַן ({
mutationFn: אַסינק (דאַטן) => {
const res = await fetch ("/ אַפּי / אָרדערס", {
אופֿן: "POST",
כעדערז: { "Content-Type": "אַפּפּליקאַטיאָן / דזשסאָן" },
גוף: JSON.stringify (דאַטאַ),
});
אויב (!res.ok) וואַרפן נייַ טעות ("ניט אַנדערש צו פאָרלייגן");
צוריקקומען רעס.דזשסאָן ();
},
});
const mutationRef = useRef (מיוטיישאַן);
mutationRef.current = מיוטיישאַן;
useEffect (() => { קאָנסט האַנדלער = (סענדער) => מוטאַטיאָן רעפ.קוררענט.מוטאַטע (סענדער.דאַטאַ); model.onComplete.add (האַנדלער); צוריקקומען () => model.onComplete.remove (האַנדלער); }, [מאָדעל]); // רעף אַוווידז שייַעך-רעגיסטרירן האַנדלער יעדער ופפירן (מיוטיישאַן כייפעץ אידענטיטעט ענדערונגען)
צוריקקומען (
<>
<איבערבליק מאָדעל = {מאָדעל} /> {מוטאַטיאָן.יסערראָר && <דייוו>טעות: {מוטאַטיאָן.ערר.מעססאַגע}
}
);
}זען די Pen SurveyJS-03-SurveyJS [פאָרקעד] דורך זעקסטעקסטינגקטיאָן.
onComplete Fires ווען דער באַניצער ריטשאַז די סוף פון די לעצטע קענטיק בלאַט. אַזוי אויב גאַנץ קיינמאָל קראָסיז 100 און די אָפּשאַצונג בלאַט איז סקיפּט, עס נאָך פירז ריכטיק ווייַל SurveyJS יוואַליוייץ וויזאַביליטי איידער איר באַשליסן וואָס "לעצטע בלאַט" מיטל.
דערנאָך, Sender.Data כּולל אַלע ענטפֿערס צוזאַמען מיט די קאַלקיאַלייטיד וואַלועס (סובטאָטאַל, שטייַער, גאַנץ) ווי ערשטער-קלאַס פעלדער, אַזוי די אַפּי פּיילאָוד איז יידעניקאַל צו וואָס די RHF ווערסיע אַסעמבאַלד מאַניואַלי אין OnSubmit.
דיMutationRef מוסטער איז דער זעלביקער איינער איר וואָלט דערגרייכן פֿאַר ערגעץ איר דאַרפֿן אַ סטאַביל געשעעניש האַנדלער איבער אַ ווערט וואָס ענדערונגען אויף יעדער ופפירן - גאָרנישט SurveyJS-ספּעציפיש וועגן אים.
דער רעאַקט קאָמפּאָנענט כּולל ניט מער קיין געשעפט לאָגיק. עס איז קיין UseWatch, קיין קאַנדישאַנאַל JSX, קיין שריט טאָמבאַנק, קיין UseMemo קייט, קיין SuperRefine. רעאַקט איז טאן וואָס עס איז אַקשלי גוט אין: רענדערינג אַ קאָמפּאָנענט און וויירינג עס צו אַ אַפּי רופן.
וואס איז ארויס פון רעאקציע?
זארגן
RHF סטאַק
SurveyJS
וויזאַביליטי
JSX צווייגן
visibleIf
דערייווד וואַלועס
useWatch / useMemo
אויסדרוק
קרייַז-פעלד כּללים
superRefine
סכעמע באדינגונגען
נאַוויגאַציע
שריט שטאַט
Page visibleIf
הערשן אָרט
פונאנדערגעטיילט אַריבער טעקעס
סענטראַלייזד אין די סכעמע
וואָס סטייז אין רעאַקט איז אויסלייג, סטילינג, סאַבמישאַן וויירינג און אַפּ ינטאַגריישאַן, וואָס איז צו זאָגן, די טינגז וואָס רעאַקט איז אַקשלי דיזיינד פֿאַר.
אַלץ אַנדערש איז אריבערגעפארן אין די סטשעמאַ, און ווייַל די סטשעמאַ איז בלויז אַ JSON כייפעץ, עס קענען זיין סטאָרד אין אַ דאַטאַבייס, ווערייישאַן ינדיפּענדאַנטלי פון דיין אַפּלאַקיישאַן קאָד אָדער עדיטיד דורך ינערלעך מכשירים אָן ריקוויירינג אַ צעוויקלען.
א פּראָדוקט פאַרוואַלטער וואָס דאַרף טוישן די שוועל וואָס טריגערז די אָפּשאַצונג בלאַט קענען טאָן דאָס אָן רירנדיק די קאָמפּאָנענט. דאָס איז אַ מינינגפאַל אַפּעריישאַנאַל חילוק פֿאַר טימז ווו פאָרעם נאַטור יוואַלווז אָפט און איז ניט שטענדיק געטריבן דורך ענדזשאַנירז.
ווען צו נוצן יעדער צוגאַנג?
דאָ איז אַ גוטע הערשן פון גראָבער פינגער וואָס אַרבעט פֿאַר מיר: ימאַדזשאַן דיליטינג די פאָרעם לעגאַמרע. וואָס וואָלט איר פאַרלירן?
אויב עס זענען סקרינז, איר ווילן קאָמפּאָנענט-געטריבן פארמען.
אויב עס איז אַ געשעפט לאָגיק, אַזאַ ווי שוועלן, בראַנטשינג כּללים און קאַנדישאַנאַל רעקווירעמענץ וואָס ענקאָוד פאַקטיש דיסיזשאַנז, איר ווילט אַ סטשעמאַ מאָטאָר.
סימילאַרלי, אויב די ענדערונגען וואָס קומען דיין וועג זענען מערסטנס וועגן לאַבעלס, פעלדער און אויסלייג, RHF וועט דינען איר פייַן. אויב זיי זענען וועגן טנאָים, רעזולטאטן און כּללים וואָס דיין אָפּס אָדער לעגאַל מאַנשאַפֿט זאל דאַרפֿן צו סטרויערן אויף אַ דינסטאג נאָכמיטאָג אָן אַפּלייינג אַ בילעט, די סטשעמאַ מאָדעל מיט SurveyJS איז מער ערלעך פּאַסיק.
די צוויי אַפּראָוטשיז זענען נישט טאַקע אין פאַרמעסט מיט יעדער אנדערער. זיי אַדרעס פאַרשידענע קלאסן פון פּראָבלעמס, און דער גרייַז צו ויסמיידן איז די אַבסטראַקציע צו די וואָג פון די לאָגיק - טרעאַטינג אַ הערשן סיסטעם ווי אַ קאָמפּאָנענט ווייַל דאָס איז די באַקאַנטע געצייַג, אָדער דערגרייכן אַ פּאָליטיק מאָטאָר ווייַל אַ פאָרעם געוואקסן צו דריי סטעפּס און קונה אַ קאַנדישאַנאַל פעלד.
די פאָרעם מיר געבויט דאָ זיצט לעבן דער גרענעץ דיליבראַטלי, קאָמפּלעקס גענוג צו ויסשטעלן די חילוק אָבער נישט אַזוי עקסטרעם אַז די פאַרגלייַך פילז ריגד. רובֿ פאַקטיש פארמען וואָס האָבן באַקומען אַנווילדי אין דיין קאָדעבאַסע מיסטאָמע זיצן לעבן דער זעלביקער גרענעץ, און די קשיא איז יוזשאַוואַלי נאָר צי ווער עס יז האט געהייסן וואָס זיי פאקטיש זענען.
ניצן React Hook Form + Zod ווען:
פארמען זענען CRUD-אָריענטיד;
לאָגיק איז פּליטקע און וי-געטריבן;
ענדזשאַנירז פאַרמאָגן אַלע נאַטור;
באַקענד בלייבט דער מקור פון אמת.
פארמען ענקאָוד געשעפט דיסיזשאַנז;
כּללים יוואַלוו ינדיפּענדאַנטלי פון וי;
לאָגיק מוזן זיין קענטיק, אַדיטאַבאַל אָדער ווערסיעס;
ניט-ענדזשאַנירז השפּעה אָפּפירונג;
דער זעלביקער פאָרעם מוזן לויפן אַריבער קייפל פראָנטענדס.
