ଏହି ଆର୍ଟିକିଲ୍ ସର୍ଭେଜେଏସ୍ ଦ୍ୱାରା ପ୍ରାୟୋଜିତ | ସେଠାରେ ଏକ ମାନସିକ ମଡେଲ୍ ଅଛି ଯାହାକି ଅଧିକାଂଶ ପ୍ରତିକ୍ରିୟାଶୀଳ ବିକାଶକାରୀମାନେ ଏହାକୁ ଉଚ୍ଚ ସ୍ୱରରେ ଆଲୋଚନା ନକରି ଅଂଶୀଦାର କରନ୍ତି | ସେହି ଫର୍ମଗୁଡ଼ିକ ସର୍ବଦା ଉପାଦାନ ବୋଲି ଅନୁମାନ କରାଯାଏ | ଏହାର ଅର୍ଥ ହେଉଛି ଏକ ଷ୍ଟାକ:
ସ୍ଥାନୀୟ ରାଜ୍ୟ ପାଇଁ ହୁକ୍ ଫର୍ମକୁ ପ୍ରତିକ୍ରିୟା କରନ୍ତୁ (ସର୍ବନିମ୍ନ ପୁନ - ରେଣ୍ଡର୍, ଏର୍ଗୋନୋମିକ୍ ଫିଲ୍ଡ ପଞ୍ଜିକରଣ, ଅପରିହାର୍ଯ୍ୟ ପାରସ୍ପରିକ କ୍ରିୟା) | ବ valid ଧତା ପାଇଁ ଜୋଡ୍ (ଇନପୁଟ୍ ସଠିକତା, ସୀମା ବ valid ଧତା, ପ୍ରକାର-ନିରାପଦ ପାର୍ସିଂ) | ବ୍ୟାକେଣ୍ଡ ପାଇଁ ପ୍ରଶ୍ନର ପ୍ରତିକ୍ରିୟା: ଦାଖଲ, ପୁନ ries ଚେଷ୍ଟା, କ୍ୟାଚିଂ, ସର୍ଭର ସିଙ୍କ, ଇତ୍ୟାଦି |
ଏବଂ ଅଧିକାଂଶ ଫର୍ମ ପାଇଁ - ଆପଣଙ୍କର ଲଗଇନ୍ ସ୍କ୍ରିନ୍, ଆପଣଙ୍କର ସେଟିଙ୍ଗ୍ ପୃଷ୍ଠାଗୁଡ଼ିକ, ଆପଣଙ୍କର CRUD ମୋଡାଲ୍ - ଏହା ପ୍ରକୃତରେ ଭଲ କାମ କରେ | ପ୍ରତ୍ୟେକ ଖଣ୍ଡ ଏହାର କାର୍ଯ୍ୟ କରେ, ସେମାନେ ସ୍ୱଚ୍ଛ ଭାବରେ ରଚନା କରନ୍ତି, ଏବଂ ତୁମେ ତୁମର ଅନୁପ୍ରୟୋଗର ଅଂଶକୁ ଯାଇପାରିବ ଯାହା ପ୍ରକୃତରେ ତୁମର ଉତ୍ପାଦକୁ ଭିନ୍ନ କରେ | କିନ୍ତୁ ପ୍ରତିଥର ଥରେ, ଏକ ଫର୍ମ ଜିନିଷଗୁଡିକ ଜମା କରିବା ଆରମ୍ଭ କରେ ଯାହା ଭିଜିବିଲିଟି ନିୟମ ଯାହା ପୂର୍ବ ଉତ୍ତର ଉପରେ ନିର୍ଭର କରେ, କିମ୍ବା ଉତ୍ପନ୍ନ ମୂଲ୍ୟ ଯାହା ତିନୋଟି କ୍ଷେତ୍ର ଦେଇ କ୍ୟାସକେଡ୍ କରେ | ବୋଧହୁଏ ସମଗ୍ର ପୃଷ୍ଠାଗୁଡ଼ିକୁ ମଧ୍ୟ ଏଡ଼ାଇ ଦିଆଯିବା କିମ୍ବା ଚାଲୁଥିବା ସମୁଦାୟ ଉପରେ ଆଧାର କରି ଦେଖାଯିବା ଉଚିତ | ଆପଣ ପ୍ରଥମ କଣ୍ଡିଶନାଲ୍ ବ୍ୟବହାର ୱାଚ୍ ଏବଂ ଏକ ଇନଲାଇନ ଶାଖା ସହିତ ପରିଚାଳନା କରନ୍ତି, ଯାହା ଭଲ ଅଟେ | ତା’ପରେ ଆଉ ଏକ | ତାପରେ ଆପଣ କ୍ରସ୍ ଫିଲ୍ଡ ନିୟମକୁ ଏନକୋଡ୍ କରିବାକୁ ସୁପର ରିଫାଇନ୍ ପାଇଁ ପହଞ୍ଚୁଛନ୍ତି ଯାହା ଆପଣଙ୍କର ଜୋଡ୍ ସ୍କିମା ସାଧାରଣ ଉପାୟରେ ପ୍ରକାଶ କରିପାରିବ ନାହିଁ | ତା’ପରେ, ଷ୍ଟେପ୍ ନେଭିଗେସନ୍ ବ୍ୟବସାୟିକ ତର୍କ ଲିକ୍ କରିବା ଆରମ୍ଭ କରେ | କିଛି ସମୟରେ, ତୁମେ ଯାହା ନିର୍ମାଣ କରିଛ ତାହା ଦେଖ ଏବଂ ଅନୁଭବ କର ଯେ ଫର୍ମଟି ପ୍ରକୃତରେ UI ନୁହେଁ | ଏହା ଏକ ନିଷ୍ପତ୍ତି ପ୍ରକ୍ରିୟାର ଅଧିକ, ଏବଂ ଉପାଦାନ ଗଛ ହେଉଛି ଯେଉଁଠାରେ ଆପଣ ଏହାକୁ ସଂରକ୍ଷଣ କରିବା ପାଇଁ ଘଟିଛନ୍ତି | ଏହିଠାରେ ମୁଁ ଭାବୁଛି ରିଆକ୍ଟରେ ଫର୍ମଗୁଡିକ ପାଇଁ ମାନସିକ ମଡେଲ୍ ଭାଙ୍ଗିଯାଏ, ଏବଂ ଏହା ପ୍ରକୃତରେ କାହାର ଦୋଷ ନୁହେଁ | RHF + Zod ଷ୍ଟାକ ଯାହା ପାଇଁ ଡିଜାଇନ୍ କରାଯାଇଥିଲା ସେଥିରେ ଉତ୍କୃଷ୍ଟ | ପ୍ରସଙ୍ଗଟି ହେଉଛି ଯେ ଆମେ ଏହାକୁ ଅତୀତରେ ବ୍ୟବହାର କରିଚାଲିଛୁ ଯେଉଁଠାରେ ଏହାର ଅବକ୍ଷୟ ସମସ୍ୟା ସହିତ ମେଳ ଖାଉଛି କାରଣ ବିକଳ୍ପଟି ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ଫର୍ମ ବିଷୟରେ ଏକ ଭିନ୍ନ ଚିନ୍ତାଧାରା ଆବଶ୍ୟକ କରେ | ଏହି ବିକଳ୍ପଟି ସେହି ବିକଳ୍ପ ବିଷୟରେ | ଏହାକୁ ଦେଖାଇବାକୁ, ଆମେ ଦୁଇଥର ସମାନ ମଲ୍ଟି ଷ୍ଟେପ୍ ଫର୍ମ ନିର୍ମାଣ କରିବୁ:
ରିଆକ୍ଟ ହୁକ୍ ଫର୍ମ + ଜୋଡ୍ ଦାଖଲ ପାଇଁ ରିଆକ୍ଟ ଜିଜ୍ଞାସା ପାଇଁ ତାରଯୁକ୍ତ, ସର୍ଭେଜେଏସ୍ ସହିତ, ଯାହା ଏକ ଫର୍ମକୁ ଡାଟା ଭାବରେ ବ୍ୟବହାର କରେ - ଏକ ସରଳ JSON ସ୍କିମା - ଏକ ଉପାଦାନ ଗଛ ଅପେକ୍ଷା |
ସମାନ ଆବଶ୍ୟକତା, ସମାନ ସର୍ତ୍ତମୂଳକ ତର୍କ, ଶେଷରେ ସମାନ API କଲ୍ | ତା’ପରେ ଆମେ ସଠିକ୍ ଭାବରେ ମ୍ୟାପ୍ କରିବୁ ଯାହା ଘୁଞ୍ଚିଗଲା ଏବଂ କ’ଣ ରହିଲା, ଏବଂ ଆପଣ କେଉଁ ମଡେଲ୍ ବ୍ୟବହାର କରିବା ଉଚିତ୍ ଏବଂ କେବେ ସ୍ଥିର କରିବାକୁ ଏକ ବ୍ୟବହାରିକ ଉପାୟ ବାହାର କରିବୁ | ଆମେ ନିର୍ମାଣ କରୁଥିବା ଫର୍ମ:
ଏହି ଫର୍ମଟି 4-ସୋପାନ ପ୍ରବାହ ବ୍ୟବହାର କରିବ: ପଦାଙ୍କ 1: ବିବରଣୀଗୁଡିକ |
ପ୍ରଥମ ନାମ (ଆବଶ୍ୟକ), ଇମେଲ୍ (ଆବଶ୍ୟକ, ବ valid ଧ ଫର୍ମାଟ୍) |
ପଦାଙ୍କ 2: ଅର୍ଡର |
ୟୁନିଟ୍ ମୂଲ୍ୟ, ପରିମାଣ, ଟିକସ ହାର, ପ୍ରାପ୍ତ: ଉପଟୋଟାଲ୍, କର, ସମୁଦାୟ
ପଦାଙ୍କ 3: ଖାତା ଏବଂ ମତାମତ |
ଆପଣଙ୍କର ଏକ ଖାତା ଅଛି କି? (ହଁ / ନା) ଯଦି ହଁ → ଉପଯୋଗକର୍ତ୍ତା ନାମ + ପାସୱାର୍ଡ, ଉଭୟ ଆବଶ୍ୟକ | ଯଦି କ → ଣସି → ଇମେଲ୍ ଷ୍ଟେପ୍ 1 ରେ ସଂଗୃହିତ ହୋଇସାରିଛି |
ତୃପ୍ତି ମୂଲ୍ୟାୟନ (1-5) ଯଦି ≥ 4 → ପଚାର “ତୁମେ କ’ଣ ପସନ୍ଦ କଲ?” ଯଦି ≤ 2 → ପଚାର “ଆମେ କ’ଣ ଉନ୍ନତି କରିପାରିବା?”
ପଦାଙ୍କ 4: ସମୀକ୍ଷା କରନ୍ତୁ |
ସମୁଦାୟ> = 100 ହେଲେ କେବଳ ଦୃଶ୍ୟମାନ ହୁଏ | ଅନ୍ତିମ ଦାଖଲ |
ଏହା ଅତ୍ୟଧିକ ନୁହେଁ | କିନ୍ତୁ ସ୍ଥାପତ୍ୟ ପାର୍ଥକ୍ୟକୁ ପ୍ରକାଶ କରିବା ଯଥେଷ୍ଟ | ଭାଗ 1: ଉପାଦାନ-ଚାଳିତ (ହୁକ୍ ଫର୍ମ + ଜୋଡ୍) ସ୍ଥାପନ npm react-hook-form zod @ hookform / resolvers @ tanstack / react-query ସଂସ୍ଥାପନ କରନ୍ତୁ |
ଜୋଡ୍ ସ୍କିମା | ଜୋଡ୍ ସ୍କିମା ସହିତ ଆରମ୍ଭ କରିବା, କାରଣ ସେହିଠାରେ ସାଧାରଣତ the ଫର୍ମର ଆକୃତି ସ୍ଥାପିତ ହୁଏ | ପ୍ରଥମ ଦୁଇଟି ସୋପାନ ପାଇଁ - ବ୍ୟକ୍ତିଗତ ବିବରଣୀ ଏବଂ ଅର୍ଡର ଇନପୁଟ୍ - ସବୁକିଛି ସରଳ: ଆବଶ୍ୟକ ଷ୍ଟ୍ରିଙ୍ଗ୍, ସର୍ବନିମ୍ନ ସଂଖ୍ୟା ଏବଂ ଏକ ଏନ୍ମ୍ | ଯେତେବେଳେ ଆପଣ ସର୍ତ୍ତମୂଳକ ନିୟମ ପ୍ରକାଶ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତି, ସେତେବେଳେ ଆକର୍ଷଣୀୟ ଅଂଶ ଆରମ୍ଭ ହୁଏ |
"zod" ରୁ {z import ଆମଦାନି କରନ୍ତୁ;
ରପ୍ତାନି const formSchema = z.object ({firstName: z.string ()। ମିନିଟ୍ (1, "ଆବଶ୍ୟକ"), ଇମେଲ୍: z.string ()। ଇମେଲ୍ ("ଅବ val ଧ ଇମେଲ୍"), ମୂଲ୍ୟ: z.number () ମିନିଟ୍ (0), ପରିମାଣ: z.number ()। ମିନିଟ୍ (1), ଟ୍ୟାକ୍ସ ରେଟ୍: z.number () z.string ()। ଇଚ୍ଛାଧୀନ (), ପାସୱାର୍ଡ: z.string ()। ଇଚ୍ଛାଧୀନ (), ସନ୍ତୁଷ୍ଟ: z.number ()। ମିନିଟ୍ (1) .ମାକ୍ସ (5), ପଜିଟିଭ୍ ଫିଡବ୍ୟାକ୍: z.string ()। ଇଚ୍ଛାଧୀନ (), ଉନ୍ନତି ଫିଡବ୍ୟାକ୍: z.string ()। ଇଚ୍ଛାଧୀନ (),})। (! data.username) {ctx.addIssue ({କୋଡ୍: "କଷ୍ଟମ୍", ପଥ: ["ଉପଯୋଗକର୍ତ୍ତା ନାମ"], ବାର୍ତ୍ତା: "ଆବଶ୍ୟକ"});
if (data.satisfaction> = 4 &&! data.positiveFeedback) {ctx.addIssue ({କୋଡ୍: "କଷ୍ଟମ୍", ପଥ: }
if (data.satisfaction <= 2 &&! data.improvementFeedback) {ctx.addIssue ({କୋଡ୍: "କଷ୍ଟମ୍", ପଥ:["ଉନ୍ନତି ଫିଡବ୍ୟାକ୍"], ବାର୍ତ୍ତା: "ଉନ୍ନତି କରିବାକୁ ଦୟାକରି ଆମକୁ କୁହନ୍ତୁ"}); }});
ରପ୍ତାନି ପ୍ରକାର FormData = z.infer
ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଚାଳକନାମ ଏବଂ ପାସୱାର୍ଡ ଇଚ୍ଛାଧୀନ () ଭାବରେ ଟାଇପ୍ ହୋଇଛି ଯଦିଓ ସେଗୁଡିକ ସର୍ତ୍ତମୂଳକ ଭାବରେ ଆବଶ୍ୟକ ହୁଏ କାରଣ ଜୋଡର ପ୍ରକାର-ସ୍ତରୀୟ ସ୍କିମ୍ ବସ୍ତୁର ଆକୃତି ବର୍ଣ୍ଣନା କରେ, କ୍ଷେତ୍ରଗୁଡ଼ିକ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ହେଲେ ନିୟମ ନୁହେଁ | କଣ୍ଡିଶନାଲ୍ ଆବଶ୍ୟକତା ସୁପର ରେଫାଇନ୍ ଭିତରେ ରହିବାକୁ ପଡିବ, ଯାହା ଆକୃତି ବ valid ଧ ହେବା ପରେ ଚାଲିବ ଏବଂ ପୂର୍ଣ୍ଣ ବସ୍ତୁକୁ ପ୍ରବେଶ କରିପାରିବ | ସେହି ପୃଥକତା ଏକ ତ୍ରୁଟି ନୁହେଁ; ଟୁଲ୍ ପାଇଁ ଏହା କେବଳ ଡିଜାଇନ୍ ହୋଇଛି: ସୁପର ରିଫାଇନ୍ ହେଉଛି ଯେଉଁଠାରେ କ୍ରସ୍ ଫିଲ୍ଡ ଲଜିକ୍ ଯାଏ ଯେତେବେଳେ ଏହା ସ୍କିମା ସଂରଚନାରେ ପ୍ରକାଶ କରାଯାଇପାରିବ ନାହିଁ | ଏଠାରେ ମଧ୍ୟ ଉଲ୍ଲେଖନୀୟ ବିଷୟ ହେଉଛି ଏହି ସ୍କିମ୍ ଯାହା ପ୍ରକାଶ କରେ ନାହିଁ | ଏହାର ପୃଷ୍ଠାଗୁଡ଼ିକର କ concept ଣସି ଧାରଣା ନାହିଁ, କେଉଁ କ୍ଷେତ୍ରରେ କେଉଁ କ୍ଷେତ୍ର ଦୃଶ୍ୟମାନ ହୁଏ, ଏବଂ ନାଭିଗେସନ୍ ର କ concept ଣସି ଧାରଣା ନାହିଁ | ସେସବୁ ଅନ୍ୟ କେଉଁଠାରେ ବାସ କରିବ | ଫର୍ମ ଉପାଦାନ |
ଆମଦାନି {useForm, useWatch} "react-hook-form"; ଆମଦାନି {zodResolver} "@ hookform / resolvers / zod"; ଆମଦାନି {useMutation} "@ tanstack / react-query";
const STEPS = ["ବିବରଣୀ", "କ୍ରମ", "ଖାତା", "ସମୀକ୍ଷା"];
OrderPayload = FormData & {subtotal: ସଂଖ୍ୟା; କର: ସଂଖ୍ୟା; ସମୁଦାୟ: ସଂଖ୍ୟା};
ରପ୍ତାନି କାର୍ଯ୍ୟ RHFMultiStepForm () {const [step, setStep] = useState (0);
const mutation = useMutation ({ mutationFn: async (payload: OrderPayload) => { const res = ଆଣିବାକୁ ଅପେକ୍ଷା କର ("/ api / orders", { ପଦ୍ଧତି: "POST", ଶୀର୍ଷଲେଖ: {"ବିଷୟବସ୍ତୁ-ପ୍ରକାର": "ପ୍ରୟୋଗ / json"}, ଶରୀର: JSON.stringify (payload), }); ଯଦି (! res.ok) ନୂତନ ତ୍ରୁଟି ପକାନ୍ତୁ ("ଦାଖଲ କରିବାରେ ବିଫଳ"); ଫେରସ୍ତ res.json (); }, });
const {ପଞ୍ଜିକରଣ, ନିୟନ୍ତ୍ରଣ, ହ୍ୟାଣ୍ଡେଲ ସବମିଟ୍, ଫର୍ମ ଷ୍ଟେଟ୍: {ତ୍ରୁଟି},} = ବ୍ୟବହାର ଫର୍ମ <ଫର୍ମଡାଟା> ({ରିଜୋଲଭର: zodResolver (ଫର୍ମ ସ୍କେମା), ଡିଫଲ୍ଟ ମୂଲ୍ୟ: {ମୂଲ୍ୟ: 0, ପରିମାଣ: 1, ଟ୍ୟାକ୍ସ ରେଟ୍: 0.1, ସନ୍ତୁଷ୍ଟ: 3, hasAccount: "ନା",},}); const price = useWatch ({ନିୟନ୍ତ୍ରଣ, ନାମ: "ମୂଲ୍ୟ"}); const ପରିମାଣ = useWatch ({ନିୟନ୍ତ୍ରଣ, ନାମ: "ପରିମାଣ"}); const taxRate = useWatch ({ନିୟନ୍ତ୍ରଣ, ନାମ: "taxRate"}); const hasAccount = useWatch ({ନିୟନ୍ତ୍ରଣ, ନାମ: "hasAccount"}); const ସନ୍ତୁଷ୍ଟ = useWatch ({ନିୟନ୍ତ୍ରଣ, ନାମ: "ସନ୍ତୁଷ୍ଟ"}); const subtotal = useMemo (() => (ମୂଲ୍ୟ ?? 0) * (ପରିମାଣ ?? 1), [ମୂଲ୍ୟ, ପରିମାଣ]); const tax = useMemo (() => subtotal * (taxRate ?? 0), [subtotal, taxRate]); const total = useMemo (() => subtotal + tax, [subtotal, tax]); const onSubmit = (ଡାଟା: ଫର୍ମ ଡାଟା) => mutation.mutate ({... ଡାଟା, ସବଟୋଟାଲ୍, ଟ୍ୟାକ୍ସ, ମୋଟ}); const showSubmit = (step === 2 && total <100) || (ପଦାଙ୍କ === 3 && ସମୁଦାୟ> = 100)
ଫେରସ୍ତ
{step === 1 && (<>
{ଷ୍ଟେପ୍ === 2 && (<> <ଚୟନ {... ପଞ୍ଜିକରଣ ("hasAccount")}> <ବିକଳ୍ପ ମୂଲ୍ୟ = "ହଁ"> ହଁ <ବିକଳ୍ପ ମୂଲ୍ୟ = "ନା"> ନା
{hasAccount === "ହଁ" && (<> <ଇନପୁଟ୍ {... ପଞ୍ଜିକରଣ ("ଚାଳକନାମ")} ସ୍ଥାନଧାରୀ = "ଉପଯୋଗକର୍ତ୍ତା ନାମ" /> <ଇନପୁଟ୍ {... ପଞ୍ଜିକରଣ ("ପାସୱାର୍ଡ")} ସ୍ଥାନଧାରୀ = "ପାସୱାର୍ଡ" /> )}
<ଇନପୁଟ୍ ପ୍ରକାର = "ସଂଖ୍ୟା" {... ପଞ୍ଜିକରଣ ("ସନ୍ତୋଷ", {ମୂଲ୍ୟ ଏସ୍ ନମ୍ବର: ସତ୍ୟ})} />
{ସନ୍ତୁଷ୍ଟ> = 4 && (<ଟେକ୍ସଟେରିଆ {... ପଞ୍ଜିକରଣ ("ପଜିଟିଭ୍ ଫିଡବ୍ୟାକ୍")} />)}
{ସନ୍ତୁଷ୍ଟ <= 2 && ()} )}
{ଷ୍ଟେପ୍ === 3 && ସମୁଦାୟ> = 100 &&
ଷୋଡଶ ଟେକ୍ସଟାଇନ୍ ଦ୍ୱାରା ପେନ୍ ସର୍ଭେ JS-03-RHF [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ | ଏଠାରେ ବହୁତ କିଛି ଘଟୁଛି, ଏବଂ ଜିନିଷଗୁଡିକ କେଉଁଠାରେ ଶେଷ ହୋଇଛି ତାହା ଧ୍ୟାନ ଦେବା ମନ୍ଥର ଅଟେ |
ଉତ୍ପାଦିତ ମୂଲ୍ୟଗୁଡିକ - ସବଟୋଟାଲ୍, ଟ୍ୟାକ୍ସ, ସମୁଦାୟ - ବ୍ୟବହାର ୱାଚ୍ ଏବଂ ବ୍ୟବହାର ମେମୋ ମାଧ୍ୟମରେ ଉପାଦାନରେ ଗଣନା କରାଯାଇଥାଏ କାରଣ ସେମାନେ ଜୀବନ୍ତ କ୍ଷେତ୍ର ମୂଲ୍ୟ ଉପରେ ନିର୍ଭର କରନ୍ତି ଏବଂ ସେମାନଙ୍କ ପାଇଁ ଅନ୍ୟ କ natural ଣସି ପ୍ରାକୃତିକ ସ୍ଥାନ ନାହିଁ | ଉପଯୋଗକର୍ତ୍ତା ନାମ, ପାସୱାର୍ଡ, ପଜିଟିଭ୍ ଫିଡବ୍ୟାକ୍, ଏବଂ ଉନ୍ନତି ଫିଡବ୍ୟାକ୍ ପାଇଁ ଭିଜିବିଲିଟି ନିୟମଗୁଡ଼ିକ ଇନଲାଇନ କଣ୍ଡିଶନାଲ୍ ଭାବରେ JSX ରେ ଲାଇଭ୍ | ଷ୍ଟେପ୍-ସ୍କିପିଙ୍ଗ୍ ତର୍କ - ସମୀକ୍ଷା ପୃଷ୍ଠା କେବଳ ଦୃଶ୍ୟମାନ ହୁଏ ଯେତେବେଳେ ସମୁଦାୟ> = 100 - ଶୋ ସବମିଟ୍ ଭେରିଏବଲ୍ ଏବଂ ଷ୍ଟେପ୍ 3 ରେ ରେଣ୍ଡର୍ କଣ୍ଡିଶନ୍ ରେ ଏମ୍ବେଡ୍ ହୁଏ | ନାଭିଗେସନ୍ ନିଜେ କେବଳ ଏକ ବ୍ୟବହାର ଷ୍ଟେଟ୍ କାଉଣ୍ଟର ଯାହା ଆମେ ମାନୁଆଲ ଭାବରେ ବୃଦ୍ଧି କରୁଛୁ | ରିଆକ୍ଟ ଜିଜ୍ଞାସା ପୁନ ries ଚେଷ୍ଟା, କ୍ୟାଚିଂ ଏବଂ ଅବ alid ଧତା ପରିଚାଳନା କରେ | ବ valid ଧ ତଥ୍ୟ ସହିତ ଫର୍ମ କେବଳ mutation.mutate କୁ କଲ୍ କରେ |
ଏଥିରୁ କ None ଣସିଟି ଭୁଲ ନୁହେଁ | ଏହା ଏପର୍ଯ୍ୟନ୍ତ ମୂର୍ଖ ପ୍ରତିକ୍ରିୟା ଅଟେ, ଏବଂ RHF କିପରି ପୁନ - ରେଣ୍ଡର୍ଗୁଡ଼ିକୁ ପୃଥକ କରେ ସେଥିପାଇଁ ଉପାଦାନଟି ଅତ୍ୟନ୍ତ କାର୍ଯ୍ୟକ୍ଷମ | କିନ୍ତୁ ଯଦି ଆପଣ ଏହାକୁ ଜଣାଇଥିବେ ଯିଏ ଏହାକୁ ଲେଖି ନାହାଁନ୍ତି ଏବଂ ସମୀକ୍ଷା ପୃଷ୍ଠା କେଉଁ ପରିସ୍ଥିତିରେ ଦେଖାଯାଏ ତାହା ବ୍ୟାଖ୍ୟା କରିବାକୁ କୁହନ୍ତୁ, ସେମାନଙ୍କୁ ଶୋ ସବ୍ମିଟ୍, ଷ୍ଟେପ୍ 3 ରେଣ୍ଡର୍ କଣ୍ଡିସନ୍, ଏବଂ ନାଭ୍ ବଟନ୍ ଲଜିକ୍ - ତିନୋଟି ପୃଥକ ସ୍ଥାନ - ଏକ ଧାଡିରେ ଦର୍ଶାଯାଇଥିବା ନିୟମକୁ ପୁନ str ନିର୍ମାଣ କରିବାକୁ ପଡିବ | ଫର୍ମ କାମ କରେ, ହଁ, କିନ୍ତୁ ଆଚରଣ ପ୍ରକୃତରେ ଏକ ସିଷ୍ଟମ ଭାବରେ ଯାଞ୍ଚଯୋଗ୍ୟ ନୁହେଁ | ଏହାକୁ ମାନସିକ ସ୍ତରରେ କାର୍ଯ୍ୟକାରୀ କରିବାକୁ ପଡିବ | ସବୁଠାରୁ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ କଥା ହେଉଛି, ଏହାକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ଇଞ୍ଜିନିୟରିଂ ଜଡିତ ହେବା ଆବଶ୍ୟକ | ସମୀକ୍ଷା ଷ୍ଟେପ୍ ଦେଖାଯିବାବେଳେ ଆଡଜଷ୍ଟ୍ କରିବା ଭଳି ଏକ ଛୋଟ ଟ୍ୱିକ୍ ମଧ୍ୟ ଅର୍ଥ ହେଉଛି ଉପାଦାନକୁ ଏଡିଟ୍ କରିବା, ବ valid ଧତାକୁ ଅପଡେଟ୍ କରିବା, ଏକ ଟାଣ ଅନୁରୋଧ ଖୋଲିବା, ସମୀକ୍ଷାକୁ ଅପେକ୍ଷା କରିବା ଏବଂ ପୁନର୍ବାର ନିୟୋଜନ | ଭାଗ 2: ସ୍କିମା-ଚାଳିତ (ସର୍ଭେ JS) ବର୍ତ୍ତମାନ ଏକ ସ୍କିମା ବ୍ୟବହାର କରି ସମାନ ପ୍ରବାହ ନିର୍ମାଣ କରିବା | ସ୍ଥାପନ npm ଇନଷ୍ଟଲ୍ ସର୍ଭେ-କୋର୍ ସର୍ଭେ-ରିଆକ୍ଟ- ui @ ଟାନଷ୍ଟ୍ୟାକ୍ / ରିଆକ୍ଟ-ଜିଜ୍ଞାସା |
ସର୍ଭେ-କୋର୍ MIT- ଲାଇସେନ୍ସପ୍ରାପ୍ତ ପ୍ଲାଟଫର୍ମ-ସ୍ independent ାଧୀନ ରନ୍ଟାଇମ୍ ଇଞ୍ଜିନ୍ ଯାହା SurveyJS ର ଫର୍ମ ରେଣ୍ଡରିଂକୁ ଶକ୍ତି ପ୍ରଦାନ କରେ - ଆମେ ଏଠାରେ ଧ୍ୟାନ ଦେଉଥିବା ଅଂଶ | ଏହା ଏକ JSON ସ୍କିମା ନିଏ, ଏଥିରୁ ଏକ ଆଭ୍ୟନ୍ତରୀଣ ମଡେଲ୍ ନିର୍ମାଣ କରେ, ଏବଂ ତୁମର ପ୍ରତିକ୍ରିୟା ଉପାଦାନରେ ଅନ୍ୟଥା ରହୁଥିବା ସବୁକିଛି ପରିଚାଳନା କରେ: ଦୃଶ୍ୟମାନତା ଅଭିବ୍ୟକ୍ତିର ମୂଲ୍ୟାଙ୍କନ, ଉତ୍ପାଦିତ ମୂଲ୍ୟ ଗଣନା କରିବା, ପୃଷ୍ଠା ସ୍ଥିତିକୁ ପରିଚାଳନା କରିବା, ବ valid ଧିକରଣ ଟ୍ରାକିଂ, ଏବଂ କେଉଁ ପୃଷ୍ଠାଗୁଡ଼ିକ ପ୍ରକୃତରେ ପ୍ରଦର୍ଶିତ ହେଲା ତାହା ନିର୍ଣ୍ଣୟ କରିବା | ସର୍ଭେ- react-ui UI / ରେଣ୍ଡରିଂ ସ୍ତର ଯାହା ସେହି ମଡେଲକୁ React ସହିତ ସଂଯୋଗ କରେ | ଏହା ମୂଳତ a ଏକ <ସର୍ଭେ ମଡେଲ୍ = {ମଡେଲ୍} /> ଉପାଦାନ ଯାହା ଇଞ୍ଜିନର ସ୍ଥିତି ପରିବର୍ତ୍ତନ ହେଲେ ପୁନ re- ପ୍ରଦର୍ଶନ କରେ | ସର୍ଭେ JS UI ଲାଇବ୍ରେରୀଗୁଡ଼ିକ ଆଙ୍ଗୁଲାର, Vue3 ଏବଂ ଅନ୍ୟାନ୍ୟ framework ାଞ୍ଚା ପାଇଁ ମଧ୍ୟ ଉପଲବ୍ଧ |
ଏକାସାଙ୍ଗରେ, ସେମାନେ ଆପଣଙ୍କୁ ନିୟନ୍ତ୍ରଣ ପ୍ରବାହର ଗୋଟିଏ ଧାଡ଼ି ନ ଲେଖି ଏକ ସମ୍ପୂର୍ଣ୍ଣ କାର୍ଯ୍ୟକ୍ଷମ, ମଲ୍ଟି-ପୃଷ୍ଠା ଫର୍ମ ରନ୍ଟାଇମ୍ ଦିଅନ୍ତି | ସ୍କିମା ଫର୍ମାଟ୍ ନିଜେ, ଯେପରି ପୂର୍ବରୁ କୁହାଯାଇଛି, କେବଳ JSON - କ D ଣସି DSL କିମ୍ବା କିଛି ମାଲିକାନା ନାହିଁ | ଆପଣ ଏହାକୁ ଇନଲାଇନ କରିପାରିବେ, ଏକ ଫାଇଲରୁ ଆମଦାନୀ କରିପାରିବେ, ଏହାକୁ ଏକ API ରୁ ଆଣିପାରିବେ, କିମ୍ବା ଏହାକୁ ଏକ ଡାଟାବେସ୍ ସ୍ତମ୍ଭରେ ସଂରକ୍ଷଣ କରିପାରିବେ ଏବଂ ଚାଲିବା ସମୟରେ ଏହାକୁ ହାଇଡ୍ରେଟ୍ କରିପାରିବେ | ସମାନ ଫର୍ମ, ଡାଟା ଭାବରେ | ଏଠାରେ ସମାନ ଫର୍ମ ଅଛି, ଏଥର JSON ବସ୍ତୁ ଭାବରେ ପ୍ରକାଶିତ | ସ୍କିମା ସବୁକିଛି ବ୍ୟାଖ୍ୟା କରେ: ଗଠନ, ବ valid ଧତା, ଦୃଶ୍ୟମାନତା ନିୟମ, ଉତ୍ପାଦିତ ଗଣନା, ପୃଷ୍ଠା ନାଭିଗେସନ୍ - ଏବଂ ଏହାକୁ ଏକ ମଡେଲକୁ ଦେଇଥାଏ ଯାହା ଚାଲିବା ସମୟରେ ଏହାର ମୂଲ୍ୟାଙ୍କନ କରେ | ଯାହା ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ଦେଖାଯାଉଛି ତାହା ଏଠାରେ ଅଛି:
ରପ୍ତାନି କନଷ୍ଟ ସର୍ଭେ ସ୍କେମା = {ଟାଇଟଲ୍: "ଅର୍ଡର ଫ୍ଲୋ", ଶୋ ପ୍ରୋଗ୍ରେସ୍ ବାର୍: "ଟପ୍", ପୃଷ୍ଠାଗୁଡ଼ିକ: [{ନାମ: "ବିବରଣୀ", ଉପାଦାନଗୁଡିକ: {ନାମ: "କ୍ରମ", ଉପାଦାନଗୁଡିକ:ନାମ: "ଟ୍ୟାକ୍ସ ରେଟ୍", ଡିଫଲ୍ଟ ମୂଲ୍ୟ: 0.1, ପସନ୍ଦ: "expression", name: "total", expression: "{subtotal} + {tax}"}]}, {name: "account", element: [{type: "radiogroup", name: "hasAccount", ପସନ୍ଦ: "ପାସୱାର୍ଡ", ଇନପୁଟ୍ ପ୍ରକାର: "ପାସୱାର୍ଡ", ଦୃଶ୍ୟମାନ If: "{hasAccount} = 'ହଁ'", ଆବଶ୍ୟକ: ସତ୍ୟ, ବ valid ଧତାକାରୀ: > = 4 "}, {ପ୍ରକାର:" ମନ୍ତବ୍ୟ ", ନାମ:" ଉନ୍ନତି ଫିଡବ୍ୟାକ୍ ", ଦୃଶ୍ୟମାନ ଯଦି:" {ସନ୍ତୋଷ} <= 2 "}]}, {ନାମ:" ସମୀକ୍ଷା ", ଦୃଶ୍ୟମାନ ଯଦି:" {ସମୁଦାୟ}> = 100 ", ଉପାଦାନଗୁଡିକ: []}]};
ଏହାକୁ କିଛି ସମୟ ପାଇଁ RHF ସଂସ୍କରଣ ସହିତ ତୁଳନା କରନ୍ତୁ |
ସୁପର ରେଫାଇନ୍ ବ୍ଲକ୍ ଯାହା ସର୍ତ୍ତମୂଳକ ଭାବରେ ଚାଳକନାମ ଏବଂ ପାସୱାର୍ଡ ଆବଶ୍ୟକ କରେ | ଦୃଶ୍ୟମାନ ଯଦି: "{hasAccount} = 'ହଁ'" isRequired ସହିତ ମିଳିତ: ସତ୍ୟ ଉଭୟ ଚିନ୍ତାଧାରାକୁ ଏକତ୍ର କରିଥାଏ, ସେହି କ୍ଷେତ୍ରରେ, ଯେଉଁଠାରେ ଆପଣ ସେଗୁଡିକ ପାଇବାକୁ ଆଶା କରିବେ | UseWatch + useMemo ଶୃଙ୍ଖଳା ଯାହା ସବଟୋଟାଲ୍, ଟ୍ୟାକ୍ସ ଏବଂ ସମୁଦାୟ ଗଣନା କରେ ତିନୋଟି ଅଭିବ୍ୟକ୍ତି କ୍ଷେତ୍ର ଦ୍ୱାରା ପ୍ରତିସ୍ଥାପିତ ହୁଏ ଯାହା ପରସ୍ପରକୁ ନାମ ଦ୍ୱାରା ସୂଚିତ କରେ | ସମୀକ୍ଷା ପୃଷ୍ଠା ସ୍ଥିତି, ଯାହା RHF ସଂସ୍କରଣରେ କେବଳ ଶୋ ସବମିଟ୍, ଷ୍ଟେପ୍ 3 ରେଣ୍ଡର୍ ଶାଖା ମାଧ୍ୟମରେ ଅନୁସନ୍ଧାନ କରି ପୁନ str ନିର୍ମାଣଯୋଗ୍ୟ | ଏବଂ ଶେଷରେ, ପେଜ୍ ଅବଜେକ୍ଟରେ ନାଭ୍ ବଟନ୍ ଲଜିକ୍ ହେଉଛି ଏକ ଦୃଶ୍ୟମାନ |
ସମାନ ତର୍କ ସେଠାରେ ଅଛି | ଏହା କେବଳ ଯେ ସ୍କିମା ଏହାକୁ ରହିବାକୁ ଏକ ସ୍ଥାନ ଦେଇଥାଏ ଯେଉଁଠାରେ ଏହା ଉପାଦାନରେ ବିସ୍ତାର ହେବା ପରିବର୍ତ୍ତେ ପୃଥକ ଭାବରେ ଦୃଶ୍ୟମାନ ହୁଏ | ଆହୁରି ମଧ୍ୟ, ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ସ୍କିମା ଟାଇପ୍ ବ୍ୟବହାର କରେ: ସବଟୋଟାଲ୍, ଟ୍ୟାକ୍ସ ଏବଂ ମୋଟ ପାଇଁ 'ଏକ୍ସପ୍ରେସନ୍' | ଅଭିବ୍ୟକ୍ତି କେବଳ ପଠନୀୟ ଏବଂ ମୁଖ୍ୟତ calc ଗଣିତ ମୂଲ୍ୟ ପ୍ରଦର୍ଶନ ପାଇଁ ବ୍ୟବହୃତ ହୁଏ | ସର୍ଭେ JS ମଧ୍ୟ ପ୍ରକାରକୁ ସମର୍ଥନ କରେ: ଷ୍ଟାଟିକ୍ ବିଷୟବସ୍ତୁ ପାଇଁ 'html', କିନ୍ତୁ ଗଣିତ ମୂଲ୍ୟ ପାଇଁ, ଅଭିବ୍ୟକ୍ତି ହେଉଛି ସଠିକ୍ ପସନ୍ଦ | ବର୍ତ୍ତମାନ ପ୍ରତିକ୍ରିୟା ପାର୍ଶ୍ୱ ପାଇଁ | ରେଣ୍ଡରିଂ ଏବଂ ଦାଖଲ | ବହୁତ ସରଳ | ସମାନ ଉପାୟରେ ଆପଣଙ୍କର API କୁ ସଂପୂର୍ଣ୍ଣ କରନ୍ତୁ - useMutation କିମ୍ବା ସାଧା ଫେଚ୍ ମାଧ୍ୟମରେ:
ଆମଦାନି {useState, useEffect, useRef "" react "ରୁ ଆମଦାନି {useMutation}" @ tanstack / react-query "; ଆମଦାନି {ମଡେଲ" ସର୍ଭେ-କୋର "ରୁ ଆମଦାନି {ସର୍ଭେ" ସର୍ଭେ-ରିଆକ୍ଟ-ui "ରୁ ଆମଦାନି {ସର୍ଭେ;
ରପ୍ତାନି କାର୍ଯ୍ୟ ସର୍ଭେ ଫର୍ମ () {କନଷ୍ଟ [ମଡେଲ] = ବ୍ୟବହାର ଷ୍ଟେଟ (() => ନୂତନ ମଡେଲ (ସର୍ଭେ ସ୍କିମା));
const mutation = useMutation ({ mutationFn: async (ଡାଟା) => {| const res = ଆଣିବାକୁ ଅପେକ୍ଷା କର ("/ api / orders", { ପଦ୍ଧତି: "POST", ଶୀର୍ଷଲେଖ: {"ବିଷୟବସ୍ତୁ-ପ୍ରକାର": "ପ୍ରୟୋଗ / json"}, ଶରୀର: JSON.stringify (ତଥ୍ୟ), }); ଯଦି (! res.ok) ନୂତନ ତ୍ରୁଟି ପକାନ୍ତୁ ("ଦାଖଲ କରିବାରେ ବିଫଳ"); ଫେରସ୍ତ res.json (); }, });
const mutationRef = useRef (mutation); mutationRef.current = ପରିବର୍ତ୍ତନ; useEffect (() => {const handler = (ପ୍ରେରକ) => mutationRef.current.mutate (sender.data); model.onComplete.add (handler); return () => model.onComplete.remove (handler);}, [model]); // ref ପ୍ରତ୍ୟେକ ରେଣ୍ଡର୍ (ମ୍ୟୁଟେସନ୍ ଅବଜେକ୍ଟ ପରିଚୟ ପରିବର୍ତ୍ତନ) ପୁନ hand ପଞ୍ଜିକରଣକୁ ଏଡାଇଥାଏ |
ଫେରସ୍ତ ( <> <ସର୍ଭେ ମଡେଲ୍ = {ମଡେଲ୍} /> {mutation.isError &&
ଷୋଡଶ ଟେକ୍ସଟାଇନ୍ ଦ୍ୱାରା ପେନ୍ ସର୍ଭେ JS-03-SurveyJS [ଫଙ୍କଡ୍] ଦେଖନ୍ତୁ |
ଯେତେବେଳେ ଚାଳକ ଶେଷ ଦୃଶ୍ୟମାନ ପୃଷ୍ଠାର ଶେଷରେ ପହଞ୍ଚେ, ସଂପୂର୍ଣ୍ଣ ଅଗ୍ନିକାଣ୍ଡ | ତେଣୁ ଯଦି ସମୁଦାୟ 100 କୁ ଅତିକ୍ରମ କରେ ନାହିଁ ଏବଂ ସମୀକ୍ଷା ପୃଷ୍ଠାକୁ ଏଡ଼ାଇ ଦିଆଯାଏ, ତଥାପି ଏହା ସଠିକ୍ ଭାବରେ ଫାୟାର୍ ହୁଏ କାରଣ “ଶେଷ ପୃଷ୍ଠା” ର ଅର୍ଥ ସ୍ଥିର କରିବା ପୂର୍ବରୁ ସର୍ଭେଜ୍ ଭିଜିବିଲିଟିର ମୂଲ୍ୟାଙ୍କନ କରେ | ତାପରେ, sender.data ପ୍ରଥମ ଶ୍ରେଣୀ କ୍ଷେତ୍ର ଭାବରେ ଗଣିତ ମୂଲ୍ୟ (ସବଟୋଟାଲ୍, ଟ୍ୟାକ୍ସ, ମୋଟ) ସହିତ ସମସ୍ତ ଉତ୍ତର ଧାରଣ କରେ, ତେଣୁ API ପେଲୋଡ୍ ସବମିଟ୍ ରେ RHF ସଂସ୍କରଣ ହସ୍ତକୃତ ଭାବରେ ଏକତ୍ର ହୋଇଥିବା ସହିତ ସମାନ | ThemutationRef ପ୍ୟାଟର୍ ସମାନ ଅଟେ ଯେଉଁଠାରେ ଆପଣ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ଏକ ସ୍ଥିର ଇଭେଣ୍ଟ ହ୍ୟାଣ୍ଡେଲର୍ ଆବଶ୍ୟକ କରନ୍ତି ଯାହା ପ୍ରତ୍ୟେକ ରେଣ୍ଡରରେ ପରିବର୍ତ୍ତନ ହୁଏ - ଏହା ବିଷୟରେ ସର୍ଭେ JS ନିର୍ଦ୍ଦିଷ୍ଟ କିଛି ନୁହେଁ |
ପ୍ରତିକ୍ରିୟା ଉପାଦାନ ଆଉ କ business ଣସି ବ୍ୟବସାୟିକ ତର୍କ ଧାରଣ କରେ ନାହିଁ | ସେଠାରେ କ W ଣସି ବ୍ୟବହାର ୱାଚ୍ ନାହିଁ, କ condition ଣସି ସର୍ତ୍ତମୂଳକ JSX ନାହିଁ, ଷ୍ଟେପ୍ କାଉଣ୍ଟର ନାହିଁ, କ use ଣସି ବ୍ୟବହାର ମେମୋ ଚେନ୍ ନାହିଁ, କ super ଣସି ସୁପରଫାଇନ୍ ନାହିଁ | ପ୍ରକୃତରେ ଏହା ଯାହା ଭଲ ତାହା ହେଉଛି ପ୍ରତିକ୍ରିୟା: ଏକ ଉପାଦାନକୁ ଉପସ୍ଥାପନ କରିବା ଏବଂ ଏହାକୁ ଏକ API କଲ୍ ରେ ତାର କରିବା | ପ୍ରତିକ୍ରିୟାରୁ କ’ଣ ଘୁଞ୍ଚିଗଲା?
ଚିନ୍ତା RHF ଷ୍ଟାକ | ସର୍ଭେ JS ଦୃଶ୍ୟମାନତା | JSX ଶାଖା | ଦୃଶ୍ୟମାନ ଯଦି ପ୍ରାପ୍ତ ମୂଲ୍ୟଗୁଡିକ ବ୍ୟବହାର ୱାଚ୍ / ବ୍ୟବହାର ମେମୋ | ଅଭିବ୍ୟକ୍ତି କ୍ରସ୍ ଫିଲ୍ଡ ନିୟମ | superRefine ସ୍କିମା ଅବସ୍ଥା | ନାଭିଗେସନ୍ ଷ୍ଟେପ୍ ଷ୍ଟେଟ୍ | ପୃଷ୍ଠା ଦୃଶ୍ୟମାନ ଯଦି ନିୟମ ଅବସ୍ଥାନ | ଫାଇଲଗୁଡ଼ିକରେ ବଣ୍ଟିତ | ଯୋଜନାରେ କେନ୍ଦ୍ରୀଭୂତ |
ରିଆକ୍ଟରେ ଯାହା ରହିଥାଏ ତାହା ହେଉଛି ଲେଆଉଟ୍, ଷ୍ଟାଇଲିଂ, ସବମିସନ୍ ୱେରିଂ, ଏବଂ ଆପ୍ ଇଣ୍ଟିଗ୍ରେସନ୍, ଯାହା କହିବାକୁ ଗଲେ, React ଜିନିଷଗୁଡ଼ିକ ପ୍ରକୃତରେ ଡିଜାଇନ୍ ହୋଇଛି | ସ୍କିମାକୁ ଅନ୍ୟ ସବୁକିଛି ଘୁଞ୍ଚିଗଲା, ଏବଂ ସ୍କିମାଟି କେବଳ JSON ବସ୍ତୁ ହୋଇଥିବାରୁ ଏହା ଏକ ଡାଟାବେସରେ ଗଚ୍ଛିତ ହୋଇପାରିବ, ତୁମର ଅନୁପ୍ରୟୋଗ କୋଡ୍ ଠାରୁ ସ୍ ently ାଧୀନ ଭାବରେ ସଂସ୍କରଣ ହୋଇପାରିବ, କିମ୍ବା ନିୟୋଜନ ଆବଶ୍ୟକ ନକରି ଆଭ୍ୟନ୍ତରୀଣ ସାଧନ ମାଧ୍ୟମରେ ସମ୍ପାଦିତ ହୋଇପାରିବ | ଏକ ଉତ୍ପାଦ ପରିଚାଳକ ଯିଏ ସୀମାକୁ ପରିବର୍ତ୍ତନ କରିବା ଆବଶ୍ୟକ କରେ ଯାହା ସମୀକ୍ଷା ପୃଷ୍ଠାକୁ ଟ୍ରିଗର କରିଥାଏ, ଉପାଦାନକୁ ସ୍ପର୍ଶ ନକରି ତାହା କରିପାରିବ | ଦଳଗୁଡିକ ପାଇଁ ଏହା ଏକ ଅର୍ଥପୂର୍ଣ୍ଣ କାର୍ଯ୍ୟକ୍ଷମ ପାର୍ଥକ୍ୟ ଯେଉଁଠାରେ ଫର୍ମ ଆଚରଣ ବାରମ୍ବାର ବିକଶିତ ହୁଏ ଏବଂ ଇଞ୍ଜିନିୟର୍ମାନଙ୍କ ଦ୍ୱାରା ସର୍ବଦା ଚାଳିତ ହୁଏ ନାହିଁ | ପ୍ରତ୍ୟେକ ଉପାୟ କେବେ ବ୍ୟବହାର କରିବେ? ଏଠାରେ ଏକ ଭଲ ନିୟମ ଯାହା ମୋ ପାଇଁ କାମ କରେ: ଫର୍ମକୁ ସଂପୂର୍ଣ୍ଣ ବିଲୋପ କରିବାକୁ କଳ୍ପନା କର | ତୁମେ କ’ଣ ହରାଇବ?
ଯଦି ଏହା ସ୍କ୍ରିନ୍, ଆପଣ ଉପାଦାନ-ଚାଳିତ ଫର୍ମ ଚାହୁଁଛନ୍ତି | ଯଦି ଏହା ବ୍ୟବସାୟିକ ତର୍କ, ଥ୍ରେସହୋଲ୍ଡ, ଶାଖା ନିୟମ, ଏବଂ ସର୍ତ୍ତମୂଳକ ଆବଶ୍ୟକତା ଯାହା ପ୍ରକୃତ ନିଷ୍ପତ୍ତିଗୁଡ଼ିକୁ ଏନକୋଡ୍ କରେ, ଆପଣ ଏକ ସ୍କିମା ଇଞ୍ଜିନ ଚାହୁଁଛନ୍ତି |
ସେହିପରି ଭାବରେ, ଯଦି ଆପଣଙ୍କ ପଥରେ ଆସୁଥିବା ପରିବର୍ତ୍ତନଗୁଡ଼ିକ ପ୍ରାୟତ lab ଲେବଲ୍, ଫିଲ୍ଡ, ଏବଂ ଲେଆଉଟ୍ ବିଷୟରେ, RHF ଆପଣଙ୍କୁ ଭଲ ସେବା କରିବ | ଯଦି ସେମାନେ ସର୍ତ୍ତ, ଫଳାଫଳ, ଏବଂ ନିୟମ ବିଷୟରେ ଯାହା ଆପଣଙ୍କର ଅପ୍ସ କିମ୍ବା ଲିଗାଲ୍ ଟିମ୍ ଟିକେଟ୍ ଦାଖଲ ନକରି ମଙ୍ଗଳବାର ଅପରାହ୍ନରେ ଆଡଜଷ୍ଟ କରିବାକୁ ଆବଶ୍ୟକ କରିପାରନ୍ତି, ସର୍ଭେଜେଏସ୍ ସହିତ ସ୍କିମା ମଡେଲ୍ ଅଧିକ ସଚ୍ଚୋଟ ଫିଟ୍ ଅଟେ | ଏହି ଦୁଇଟି ଉପାୟ ପ୍ରକୃତରେ ପରସ୍ପର ସହିତ ପ୍ରତିଦ୍ୱନ୍ଦ୍ୱିତା ନୁହେଁ | ସେମାନେ ବିଭିନ୍ନ ଶ୍ରେଣୀର ସମସ୍ୟାର ସମାଧାନ କରନ୍ତି, ଏବଂ ଏଡ଼ାଇବାକୁ ଥିବା ଭୁଲଟି ହେଉଛି ତର୍କର ଓଜନ ସହିତ ଅବକ୍ଷୟକୁ ମେଳାଇବା - ଏକ ନିୟମ ପ୍ରଣାଳୀକୁ ଏକ ଉପାଦାନ ପରି ବ୍ୟବହାର କରିବା କାରଣ ତାହା ହେଉଛି ପରିଚିତ ଉପକରଣ, କିମ୍ବା ଏକ ପଲିସି ଇଞ୍ଜିନ୍ ପାଇଁ ପହଞ୍ଚିବା କାରଣ ଏକ ଫର୍ମ ତିନି ସୋପାନକୁ ବୃଦ୍ଧି ପାଇଲା ଏବଂ ଏକ ସର୍ତ୍ତମୂଳକ କ୍ଷେତ୍ର ହାସଲ କଲା | ଆମେ ଏଠାରେ ନିର୍ମାଣ କରିଥିବା ଫର୍ମ ଚତୁରତାର ସହିତ ସୀମା ନିକଟରେ ବସିଥାଏ, ପାର୍ଥକ୍ୟକୁ ପ୍ରକାଶ କରିବାକୁ ଯଥେଷ୍ଟ ଜଟିଳ କିନ୍ତୁ ଏତେ ଚରମ ନୁହେଁ ଯେ ତୁଳନା ତୁଳନାତ୍ମକ ଭାବରେ ଅନୁଭବ କରେ | ଅଧିକାଂଶ ପ୍ରକୃତ ଫର୍ମ ଯାହା ତୁମର କୋଡବେସରେ ଅସ୍ପଷ୍ଟ ହୋଇପାରିଛି ବୋଧହୁଏ ସେହି ସୀମା ନିକଟରେ ବସିଥାଏ, ଏବଂ ପ୍ରଶ୍ନଟି ସାଧାରଣତ just କେବଳ ପ୍ରକୃତରେ କେହି ନାମକରଣ କରିଛନ୍ତି କି ନାହିଁ | ଯେତେବେଳେ ରିଆକ୍ଟ ହୁକ୍ ଫର୍ମ + ଜୋଡ୍ ବ୍ୟବହାର କରନ୍ତୁ:
ଫର୍ମଗୁଡିକ CRUD- ଆଧାରିତ; ତର୍କଟି ଅସ୍ଥାୟୀ ଏବଂ UI ଚାଳିତ; ଇଞ୍ଜିନିୟରମାନେ ସମସ୍ତ ଆଚରଣର ମାଲିକ ଅଟନ୍ତି; ବ୍ୟାକେଣ୍ଡ୍ ସତ୍ୟର ଉତ୍ସ ହୋଇ ରହିଥାଏ |
ଯେତେବେଳେ ସର୍ଭେ JS ବ୍ୟବହାର କରନ୍ତୁ:
ଫର୍ମଗୁଡିକ ବ୍ୟବସାୟ ନିଷ୍ପତ୍ତି ଏନକୋଡ୍ କରେ; UI ରୁ ନିୟମ ସ୍ୱାଧୀନ ଭାବରେ ବିକଶିତ ହୁଏ; ତର୍କ ନିଶ୍ଚିତ ଭାବରେ ଦୃଶ୍ୟମାନ, ଅଡିଟିଭ୍ କିମ୍ବା ସଂସ୍କରଣ ହେବା ଆବଶ୍ୟକ; ଅଣ-ଇଞ୍ଜିନିୟର୍ମାନେ ଆଚରଣକୁ ପ୍ରଭାବିତ କରନ୍ତି; ସମାନ ଫର୍ମ ନିଶ୍ଚିତ ଭାବରେ ଏକାଧିକ ଫ୍ରଣ୍ଟେଣ୍ଡରେ ଚାଲିବ |
