فارم کے ساتھ رد عمل فارم ریاست کا انتظام کریں

Sep 13, 2025
کيسے
Manage React form
(تصویری کریڈٹ: میٹ کیڑے)

فارم کے ساتھ ردعمل فارم ریاست کو کیسے منظم کرنے کے بارے میں ہمارے گائیڈ میں خوش آمدید. فارم عناصر ان کے اقدار کو اپنی داخلی ریاست میں رکھے ہوئے ہیں - ردعمل کی ریاست پر مبنی نقطہ نظر کے ساتھ مشکلات میں. دو کام کرنے کے ساتھ ساتھ، ہمیں زیادہ ملوث حل کی ضرورت ہے، جیسے ہر میدان کے لئے کنٹرول اجزاء کا استعمال کرتے ہوئے.

لیکن اعداد و شمار پر قبضہ کرنے کے مقابلے میں ایک فارم بنانے کے لئے بہت سے پہلوؤں ہیں. ہمیں فارمیٹنگ درست ہے چیک کرنے کی ضرورت ہے، تمام ضروری شعبوں کو مقرر کیا گیا ہے اور یہ کہ جمع ہونے پر سب کچھ کامیابی سے بھیجا گیا تھا. یہ بہت پیچیدہ منطق کی طرف جاتا ہے جو تیزی سے تعمیر کر سکتا ہے. یہ جگہ ہے جہاں فارم میں مدد مل سکتی ہے.

اپنے ویب ڈیزائن کو بہتر بنانے میں مدد کے لئے مزید وسائل کے لئے، ہمارے روڈ ٹاؤن کی جانچ پڑتال کریں ویب ڈیزائن کے اوزار اور کلاؤڈ اسٹوریج اختیارات. خرگوش سے شروع صحیح انتخاب کریں ویب سائٹ بلڈر اور آپ کو حاصل ویب میزبانی ہمارے راؤنڈ اپ کے ساتھ سروس.

فارمک کیا ہے؟

فارمیک ایک ہلکا پھلکا لائبریری ہے جو ان مسائل کو ہینڈل کرتی ہے. فراہم کردہ اجزاء کے ساتھ ایک فارم کو لپیٹ کر، ہم مفت کے لئے بہت سارے رویے حاصل کرتے ہیں. ہم سب کو فراہمی کرنے کی ضرورت ہے کہ کوڈ کو ہینڈل کرنے کے لئے کوڈ کیا ہے کہ ہمارے فارم کو منفرد بناتا ہے.

ہمیں کس طرح فارمک کر سکتے ہیں تلاش کرنے میں ہماری مدد کرنے کے لئے، ہم ایک چھوٹی سی ووٹنگ کی درخواست کی تعمیر کریں گے. صارف اپنے نام درج کر سکتے ہیں اور فراہم کردہ اختیارات میں سے ایک پر ووٹ ڈال سکتے ہیں. اگر سب کچھ ٹھیک ہے تو، فارم جمع کرے گا، لیکن اگر نہیں، تو صارف کو غلطی کا پیغام ملتا ہے.

01. شروع کرو

شروع کرنے کے لئے، کمانڈ لائن پر ٹیوٹوریل فائلوں سے 'سبق' ڈائرکٹری کھولیں. انحصار انسٹال کریں اور سرور شروع کریں. یہ اپلی کیشن تخلیق شدہ ایپ پر بنایا گیا ہے اور اس کے پیکجوں میں شامل ہے، اس کے ساتھ ساتھ اسٹائل کے ساتھ مدد کرنے کے لئے فارمک خود اور دوسروں کے ساتھ ساتھ. 

 اور جی ٹی؛ این پی ایم انسٹال
& gt؛ این پی ایم شروع

ترقیاتی سرور شروع ہو جائے گا اور درخواست دوبارہ براؤزر میں کھولتا ہے. App.js فائل پوری درخواست کو کنٹرول کرتی ہے جو فارم کے لئے ہمارے کنٹینر جزو فراہم کرے گا. کو کھولنے SRC / App.js. اور درآمد & lt؛ votecontainer. & gt؛ جزو 

 "./votecontainer" سے درآمد votecontainer درآمد؛

پھر اسے درخواست میں شامل کریں. 

 & lt؛ سیکشن کلاس نام = "ووٹ کنٹینر" اور جی ٹی؛
  & lt؛ votecontainer / & gt؛
& lt؛ / سیکشن اور GT؛

02. فارم فارم بنائیں

فارمک فارم دو طریقوں میں پیدا کی جا سکتی ہیں. The. withformik. اعلی آرڈر جزو ہمیں موجودہ جزو لپیٹ کرنے کے قابل بناتا ہے یا استعمال کرتا ہے & lt؛ فارمک اور جی ٹی؛ ایک رینڈر پروپوزل کے ساتھ اجزاء جو اسی فنکشن کو انجام دیتا ہے، جو ہم استعمال کرتے ہیں.

votecontainer.js کے اندر، ایک فعال جزو بنائیں جو فارم کے لئے تمام منطق کو برقرار رکھے گا. یہ واپسی A. & lt؛ فارمک اور جی ٹی؛ جزو جو ہماری شکل دیتا ہے. شعبوں کے لئے ایک ابتدائی قیمت فراہم کریں ہم بعد میں بعد میں شامل کریں گے ابتداء پروپوزل 

 "فارمک" سے درآمد {فارمک}؛
"./vote" سے درآمد ووٹ؛

فنکشن Votecontainer () {
  واپسی اور ایل ٹی؛ فارمیک
    InitalSevalues ​​= {{نام: ""، جواب: ""}}
render = {props = & gt؛ & lt؛ ووٹ {... props} / & gt؛} / & gt؛

03. ووٹ اجزاء بنائیں

The. & lt؛ ووٹ اور جی ٹی؛ جزو فارم کی ساخت رکھتا ہے. فارمک منطق علیحدہ ہونے سے ہم فارم جزو کو ممکنہ طور پر آسان بنا سکتے ہیں.

ووٹ کے اندر ایک ووٹ اجزاء بنائیں جو استعمال کرتا ہے & lt؛ فارم اور جی ٹی؛ فارم سے اجزاء فارم کو عام طور پر جمع کرنے کے لئے ایک بٹن شامل کریں. 

 "فارمک" سے درآمد {فارم}؛
فنکشن ووٹ () {
  واپسی (
    & lt؛ فارم کلاس نام = "ووٹ" اور جی ٹی؛
      & lt؛ ان پٹ کی قسم = "جمع کرائیں" قیمت = "ووٹ اب" / & gt؛
    & lt؛ / فارم اور جی ٹی؛
  )؛
}

04. فیلڈز شامل کریں

فارمک ہر فیلڈ میں تبدیلیوں کا سراغ لگاتا ہے اور فارم جمع کرنے کے بعد انہیں فراہم کرے گا. یہ اس طرح کے طور پر فارم اور ہر میدان سے اس کے اندر اندر یہ سب کچھ کرتا ہے.

ایک فارم کی سطح پر دو مخصوص واقعات ہیں - جمع کرائیں اور ری سیٹ کریں. جب ایک فارم جمع ہوجاتا ہے، تو ہمیں اس کی جانچ پڑتال کرنے اور اس کی چیک انجام دینے کے لئے فارمک کی ضرورت ہوتی ہے، ریاست کو صاف کرنے کے لۓ ری سیٹ ایونٹ کے ساتھ. درآمد & lt؛ فارم اور جی ٹی؛ اجزاء ان واقعات کو فارمک پر پابند کرتا ہے.

اب ہم اپنے پہلے فیلڈ کو شامل کر سکتے ہیں. ہر ووٹ کو ایک نام کے ساتھ ہونے کی ضرورت ہے، جس کا مطلب ہمیں سب سے پہلے متن ان پٹ کی ضرورت ہے.

The. & lt؛ فیلڈ اور جی ٹی؛ اجزاء اسی کام کے طور پر کرتا ہے & lt؛ فارم اور جی ٹی؛ پوری شکل کے لئے کرتا ہے. یہ فیلڈ ریاست کو ظاہر کرنے کے لئے ضروری واقعات اور پروپس جیسے نام اور قیمت کے طور پر پابند کرتا ہے.

فارم میں ایک فیلڈ شامل کریں اور اسے ایک لیبل سے منسلک کریں. یہ کام جیسا کہ وہ باقاعدگی سے HTML فارم میں ہوں گے. 

 "فارمیک" سے درآمد {فیلڈ}؛
& lt؛ لیبل HTMLFOR = "نام" اور GT؛ نام اور لیفٹیننٹ؛ / لیبل اور جی ٹی؛
& lt؛ فیلڈ خود کار طریقے سے = "نام" id = "نام" نام = "نام" ٹائپ = "متن" / & gt؛

05. سپلائی منطق

ہمیں کسی بھی براؤزر کے واقعات کے ساتھ کام کرنے کی ضرورت نہیں ہے، جیسا کہ onsubmit. ایونٹ ہمارے لئے سنبھالا ہے. لیکن ہمیں جمع کرانے کے لئے منطق کی فراہمی کی ضرورت ہے. کال بیک بیک اب بھی کہا جاتا ہے onsubmit. لیکن اس کے بجائے فارم اقدار کو براہ راست حاصل کرتا ہے. یہ بھی 'بیگ' حاصل کرتا ہے - ایک ایسی چیز جس میں اس فارم کے ساتھ بات چیت کرنے کے لۓ کچھ طریقوں پر مشتمل ہے.

جیسا کہ یہ اعداد و شمار عام طور پر سرور پر سر کرے گا، یہ فنکشن بھی غیر معمولی ہو سکتا ہے. فارمک ایک خاص ہے Issubmitting. تجویز ہے کہ جمع کرانے کے بعد یہ خود کار طریقے سے خود کار طریقے سے سیٹ کریں. ایک async تقریب کے ساتھ، ہم اس وقت تک انتظار کر سکتے ہیں جب تک کہ فارم پیش کی گئی ہے اور اس نے واپس غلط استعمال کی ہے.

واپس votecontainer.js کے اندر، ہم اپنے جمع کرانے کے منطق کو شامل کر سکتے ہیں. فنکشن بنائیں اور اسے منتقل کریں & lt؛ فارمک اور جی ٹی؛ جزو اس مثال کے لئے، ہم کسی سرور کو نہیں بھیجے گا لیکن ہم نیٹ ورک کی طول و عرض کی سماعت کرنے کے لئے تاخیر وعدہ استعمال کرسکتے ہیں. 

 COST ONSUBMIT = ASYNC (اقدار، بیگ) = & gt؛ {
    نیا وعدہ کا انتظار (حل = & gt؛ settimeout (حل، 1000))؛
    بیگ. setsubmitting (غلط)؛
    کنسول .log ("فارم جمع"، اقدار)؛
  }؛
واپسی اور ایل ٹی؛ فارمک [...] onsubmit = {onsubmit} / & gt؛

06. ڈسپلے ریاست

ہمیں اس فارم کے اندر اس جمع کرنے والے ریاست کو بھی ظاہر کرنے کی ضرورت ہے. ڈبل جمع کرانے کو روکنے کے لئے، جب فارم جمع کر رہا ہے تو ہم بٹن کو غیر فعال کرسکتے ہیں. فارمک کو اس فارم میں فارم میں منتقل ہوتا ہے. ہم اس کو باہر نکال سکتے ہیں اور اسے بٹن پر لاگو کرسکتے ہیں. 

 فنکشن ووٹ ({Issubmitting}) {[...]}
& lt؛ ان پٹ معذور = {Issubmitting} قسم = "جمع کرائیں" قیمت = "ووٹ اب" / & gt؛

07. نام فیلڈ شامل کریں

اس وقت فارم میں داخل ہونے کے بغیر فارم جمع کیا جاسکتا ہے. جیسا کہ یہ ایک لازمی میدان ہے، ہمیں یہ صارف کو پرچم کرنا چاہئے.

جڑ & lt؛ فارمک اور جی ٹی؛ اجزاء کو بھی ایک درست پروپوزل لیتا ہے، جس میں ایک فنکشن ہے جو توثیق انجام دیتا ہے اور کسی چیز کو واپس دیتا ہے. ہر کلیدی قدر جوڑی ایک فیلڈ اور ایک غلطی کا پیغام پیش کرتا ہے. اگر اس میدان میں کوئی فیلڈ کوئی قدر نہیں ہے تو، یہ درست سمجھا جاتا ہے. فارم صرف اس وقت جمع کرے گا جب یہ فنکشن ایک خالی اعتراض واپس آتی ہے. فنکشن فارم کے اقدار کو ایک دلیل کے طور پر حاصل کرتا ہے. ایک ضروری میدان کے لئے، ہم صرف قیمت کی جانچ پڑتال کی ضرورت ہے ایک خالی تار نہیں ہے.

واپس votecontainer.js کے اندر، اس قیمت کو چیک کرنے کے لئے ایک درست کال بیک تقریب بنائیں اور اسے فارمک تک ہک. 

 COST درست = اقدار = & gt؛ {
    مسلسل غلطیاں = {}؛
    اگر (اقدار. نام === "") {
      غلطیاں. نام = "نام کی ضرورت ہے"؛
    }
    غلطیاں واپس لو
  }؛
واپسی اور ایل ٹی؛ فارمک [...] درست = {درست} / & gt؛

08. غلطیاں دکھائیں

اس غلطیوں کو پھر ووٹ ڈالنے کے لئے منظور کیا جاتا ہے. غلطیاں ان لائن کو ظاہر کرنے کے لئے، ہمیں مخصوص شکل کے میدان میں غلطیوں سے ملنے کی ضرورت ہے. 

 فنکشن ووٹ ({Issubmitting، غلطیاں، چھونے}) {[...]}
& lt؛ div classname = "ان پٹ گروپ" اور جی ٹی؛
  & lt؛ لیبل HTMLFOR = "نام" اور GT؛ نام اور لیفٹیننٹ؛ / لیبل اور جی ٹی؛
  & lt؛ div.
    classname = {classnames ({
      "توثیق گروپ": سچ،
      خرابی: !! غلطیاں. نام اور AMP؛ & amp؛ ٹچ. نام
    })}
  & gt؛
    & lt؛ فیلڈ خود کار طریقے سے = "نام" id = "نام" نام = "نام" ٹائپ = "متن" / & gt؛
    {!! غلطیاں. نام اور AMP؛ & amp؛ ٹچ. نام اور AMP؛ & amp؛ (
      & lt؛ div classname = "غلطی پیغام" & gt؛ {غلطیاں. نام} & lt؛ / div & gt؛
    )}
  & lt؛ / div & gt؛
& lt؛ / div & gt؛

فارمک ہر وقت اس کی اپ ڈیٹ کرتا ہے. بہت سے شعبوں کے ساتھ ایک فارم فوری طور پر پہلی تبدیلی کے بعد غلطیوں کے ساتھ جھگڑا کیا جائے گا. اس سے بچنے کے لئے، ہم صرف اس غلطی کو ظاہر کرتے ہیں جب ایک فیلڈ 'چھو لیا گیا ہے'، مطلب یہ ہے کہ یہ کچھ نقطہ نظر سے بات چیت کی گئی ہے. جب ایک فارم جمع ہوجاتا ہے تو، فارمک تمام شعبوں کو چھو اور کسی بھی پوشیدہ غلطیوں کو دکھائے گا.

09. جواب فیلڈ شامل کریں

Manage React

(تصویری: © میٹ کیڑے)

نام کے میدان کے ساتھ، ہم جواب میں منتقل کر سکتے ہیں. ہم نے ابھی تک باقاعدگی سے متن کے آدانوں کے لئے کام کرنے والے نقطہ نظر کو اچھی طرح سے کام کیا ہے لیکن ایک سے زیادہ آدانوں کے لئے موزوں نہیں ہے جو اسی فیلڈ کے نام کے تحت گر جاتے ہیں، جیسے ریڈیو بٹن کے ایک گروپ.

جب ہم ایک سے زیادہ شامل ہوسکتے ہیں & lt؛ فیلڈ اور جی ٹی؛ اسی نام کے ساتھ اجزاء، ہمیں اپنے آپ کو زیادہ سے زیادہ حد تک دوبارہ بار بار سے بچنے سے روکنا چاہئے. اس کے بجائے، فارمک ہمیں اپنی مرضی کے مطابق جزو میں & lt؛ فیلڈ اور GT؛ یہ ان کے طور پر ان کا انتظام کر سکتا ہے.

The. & lt؛ جواب گروپ گروپ اور جی ٹی؛ اجزاء متن ان پٹ کی طرح کام کرتا ہے. یہ ایک اختیارات کو فروغ دیتا ہے، جو ایک صف ہے جس میں ڈسپلے کرنے کے اختیارات شامل ہیں. یہ اسٹائل شدہ ریڈیو کے بٹنوں میں تبدیل کر رہے ہیں جو صارفین کو جواب کا انتخاب کرتے ہیں. ووٹ ڈاٹ کام کے اندر اس اجزاء کو شامل کریں. کا استعمال کرتے ہوئے & lt؛ فیلڈ اور جی ٹی؛ اس معاملے میں یہ ایک ہی پروپس کے ساتھ ساتھ کسی بھی اضافی طور پر منظور کیا جاتا ہے. اختیارات مسلسل. 

 "./answergroup" سے درآمد جواب دیں.
& lt؛ فیلڈ اجزاء = {جوابی گروپ} اختیارات = {اختیارات} نام = "جواب" / & gt؛

Manage React

(تصویری: © میٹ کیڑے)

آخر میں، ہمیں votecontainer.js میں بھی ہماری توثیق کی تقریب میں جواب کی ضرورت ہے. یہ عمل نام کے میدان کے ساتھ ہی ہے. 

 اگر (اقدار .انسور === "") {
  غلطیاں .انسور = "جواب کی ضرورت ہے"؛

توثیق اور جمع کرانے کے منطق کو علیحدہ رکھنے اور فارمک کا استعمال کرتے ہوئے سب کچھ مل کر سلائی کرنے کے لۓ، ہم ہر ٹکڑا چھوٹے اور سمجھنے میں آسان رکھنے کے قابل ہیں.

یہ مواد اصل میں شائع ہوا نیٹ میگزین . ہمارے مزید پڑھیں ویب ڈیزائن مضامین یہاں .

مزید پڑھ:

  • ردعمل سائٹس اور اطلاقات کی جانچ کیسے کریں
  • 2020 کے لئے 6 بھاری ویب ڈیزائن رجحانات
  • ویب ڈیزائن میں ماسٹر minimalism

کيسے - انتہائی مشہور مضامین

P5.js کے ساتھ اعداد و شمار کے نقطہ نظر کو تلاش کریں

کيسے Sep 13, 2025

(تصویری کریڈٹ: نیٹ میگزین) P5.js مشہور ڈیسک ٹاپ تخلیقی کوڈنگ ماحول پ..

تیل کے ساتھ پورٹریٹ پینٹنگ سے نمٹنے کے

کيسے Sep 13, 2025

یہ ورکشاپ معنی کے ساتھ ایک پورٹریٹ تیل پینٹنگ بنانے کے بارے میں ہے. یہ ا�..

ٹرمینٹر لائن کیا ہے؟

کيسے Sep 13, 2025

روشنی کے بہت سے پہلوؤں ہیں جو آپ کو فارم کو پہنچانے کے لۓ غور کرنے کی ضرو..

کس طرح ایک Photorealistic کمرہ منظر بنانے کے لئے

کيسے Sep 13, 2025

جاننا چاہتے ہیں کہ حقیقت پسندانہ 3D آرکیٹیکچرل مکھی کے ذریعے کس طرح پیدا..

زبرش میں ایک غیر ملکی قزاقوں کی مخلوق ماڈل

کيسے Sep 13, 2025

آپ کو 3D اجنبی سمندری ڈاکو کردار بنانے کے بارے میں جاننے میں مدد کرنے کے �..

کوکولر 4 میں کیا نیا ہے؟

کيسے Sep 13, 2025

صفحہ 1 کا 2: 1-10 مرحلے 1-10 مرحلے ..

فوٹوشاپ میں ایک متحرک GIF بنائیں

کيسے Sep 13, 2025

ایڈوب نے آج ویڈیو سبق کی ایک نئی سیریز شروع کررہے ہیں، اب یہ بنائے گئے ہیں، جس کا مقصد مختلف طریقے سے استعم..

ویب کے لئے سادہ عکاسی بنائیں

کيسے Sep 13, 2025

میں بیٹھ گیا، کچھ موسیقی، بتیوں کو ڈیمڈ کیا اور اپنے لیپ ٹاپ کھول دیا. م�..

اقسام