همه چیز درباره کاربرد و نحوه استفاده از ref در react



visibility  
mode_comment   ۰

همه چیز درباره کاربرد و نحوه استفاده از ref در react

در این مطلب میخوام شما رو با کاربرد و نحوه استفاده از ref در React آشنا کنم و با استفاده از اون به راحتی به المنتهای DOM دسترسی پیدا کرده و کار مورد نظرمون رو انجام بدیم.

به احتمال زیاد تا حالا براتون پیش اومده که بخواید در یک برنامه React به المنتهای DOM دسترسی مستقیم داشته باشید. اگر بخوام با یک مثال کاربرد ref رو نشون بدم، میشه اینطور فرض کرد که بخوایم مقدار یک المنت input رو بدون اینکه از props و re-render کردن استفاده کنیم، تغییر بدیم.

در ادامه نحوه استفاده از ref در react و مثالهای کاربردی از اون رو در اختیارتون قرار میدم تا بهتر و بیشتر با اون آشنا بشید.

نحوه ساختن ref

در نسخه React 16.3 یک API جدید بنام createRef() برای ساختن ref معرفی شد. شما میتونین در constructor با استفاده از createRef یک ref رو به وجود آورده و با استفاده از ویژگی ref، المنت مورد نظر رو به اون attach یا متصل کنید.

مثال زیر رو ببینید:

همونطور که میبینید یک ویژگی بنام exampleRef به وجود آوردیم و اون رو به عنوان مقدار ref المنت input قرار دادیم. پس در نتیجه با استفاده از exampleRef میتونیم به المنت input در DOM دسترسی داشته باشیم و کارهای مورد نظرمون رو انجام بدیم.

اگر بخوایم به node مربوط به این المنت دسترسی داشته باشیم از this.exampleRef.current استفاده میکنیم. مثال زیر رو ببینید:

همونطور که میبینید یک ref بنام textInput ساختیم و اون رو در ویژگی ref المنت input قرار دادیم. زمانی که فرم مورد نظر submit میشه، رویداد onsubmit فراخوانی میشه و در نتیجه متد handleSubmit اجرا میشه. در متد handleSubmit مقدار فعلی input با استفاده از this.textInput.current.value گرفته میشه و برای ویژگی value در state قرار میگیره.

پس زمانی که متنی رو در input وارد میکنید و submit رو کلیک میکنید، مقدار وارد شده در input به شما در تگ h3 نشون داده میشه. میتونین خروجی کد بالا رو ببینید: حالا میخوایم روشهای دیگه ساخت ref رو بررسی کنیم.

پاس دادن یک تابع callback به ref

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

React به شما اجازه میده که با پاس دادن یک callback به ویژگی ref بتونین ref مورد نظر خودتون رو به وجود بیارید. طرز استفاده از اون بصورت زیر هست:

کاربرد ref در اینجا اینه که یک reference به المنت مورد نظر رو در this.textInput نگه داره تا بتونیم از اون استفاده کنیم. اگر بخوایم به مقدار این المنت هم با استفاده از ref دسترسی داشته باشیم بصورت this.textInput.value عمل میکنیم. اگر بخوایم مثال قبل رو با استفاده از این روش دوباره به وجود بیاریم، بصورت زیر خواهد بود:

این امکان همچنین وجود داره که با استفاده از callback بتونیم ref رو از کامپوننت پدر به فرزند پاس بدیم. مثال زیر رو ببینید:

به همین راحتی.

قرار دادن رشته برای ویژگی ref

این روش یک روش قدیمی هست و بخاطر مشکلاتی که داره در آینده به احتمال زیاد حذف میشه. بخاطر این دلیل این نمونه ref آموزش داده میشه چون امکان داره اون رو در جایی ببینید و بهتره که در مورد اون اطلاعاتی داشته باشید.

اگر بخوایم مثالهای بالا رو با استفاده از این روش بنویسیم، بصورت زیر خواهد بود:

همونطور که میبینید رشته textInput برای ویژگی ref المنت input قرار داده شده و در متد handleSubmit هم با استفاده از this.refs.textInput.value به مقدار اون دسترسی پیدا کردیم و اون رو به کاربر نمایش دادیم.

خب روشهای مختلف ساخت ref رو دیدیم. حالا یک مثال کاربردی برای استفاده از اون میزنیم.

استفاده از ref برای form validation

با استفاده از ref میتونین به راحتی form validation سمت کلاینت رو مدیریت کنیم و اجازه submit کردن رو فقط تحت شرایط خاصی در اختیار کاربر قرار بدیم.

مثال زیر رو ببینید:

همونطور که دیدید با استفاده از createRef دو ref به نامهای username و password به وجود آوردیم و اونا رو به المنتهای input نسبت دادیم. در متد handleSubmit با استفاده از this.username.current.value و this.username.current.value به مقادیر اونا دسترسی پیدا کردیم و این مقادیر رو به متد handleValidation ارسال کردیم و در اونجا شرایطی رو بررسی کردیم و در صورت عدم وجود شرایط، ارورهای متناسبی رو به کاربر نمایش میدیم.

میتونین خروجی کد بالا رو ببینید: اگر username خالی باشه یا password کمتر از 6 حرف باشه، فرم submit نمیشه و متن ارور هم بهتون نمایش داده میشه. شما میتونین این شرایط رو سختتر کنید و form validation حرفه‌ای تری رو به وجود بیارید.

در این لینک میتونین بقیه مطالب مرتبط با React رو در سون لرن مشاهده کنید.

نتیجه گیری

در این مطلب با کاربرد و نحوه استفاده از ref در react آشنا شدیم و مثالهایی در مورد اون با هم بررسی کردیم و دیدیم که با استفاده از ref میتونیم به المنت مورد نظر در DOM دسترسی پیدا کنیم.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.