ری اکت رف React Ref میتواند یک المنت را سلکت کند!

با متد createRef میتوان این کار را انجام داد. این پاسخ کوتاه است. همانطور که میدانید در جاوااسکریپت با document.querySelector المنت های Real DOM را انتخاب میکنیم. این المنت ها در برگه html ما هستند. اما اگر html و js با هم jsx شوند, حالا چگونه یک المنت را در jsx بگیریم؟ کافیست از React.createRef استفاده کنیم. با یک مثال, بهتر در جریان قرار میگیریم! با ری اکت رف اشنا شویم!

برای اطلاعات جامع میتوانید به سایت اصلی ری اکت مراجعه فرمایید.

ری اکت رف: یک مثال ساده

مثال زیر یک مثال ساده است. صرفا به دو خط آن توجه کنید. یکی خط آخر که myRef دارد و دیگری خط سوم که ref تازه ساخته شده است. اینگونه ساخته میشود و داخل یک المنت قرار میگیرد. در حقیقت به یک المنت نسبت داده میشود.

class MyComponent extends React.Component { 
constructor(props) { super(props);
 this.myRef = React.createRef(); } 
 render() { 
 return <div ref={this.myRef} />; 
 }  } 

پس از اینکه ری اکت رف ساختیم و نسبت هم دادیم میتوانیم با فراخوانی نام ref ساخته شده, آن المنت را بگیریم. یا به عبارتی getElement انجام دهیم.

const node = this.myRef.current;

مثال دوم: دکمه و متن پنهان شونده

این مثال شامل یک کلاس ES6 است. این کلاس شامل یک ری اکت رف به نام ref1 است. میتوانید در کد های زیر به من نشان دهید؟ میتوانید کدهای زیر را به ویرایشگر کد Atom کپی پیست کنید تا زیبا ببینید! حالا به من بگویید ref1 در دو نقطه از کدهای زیر کجا ها هستند؟ پیدا کردید؟! بیایید با هم این کلاس را تفسیر کنیم! خودتان ان را تست کنید و در بروزر نتیجه را مشاهده نمایید!

export class About extends React.Component {
  constructor(props) { super(props);
    this.ref1 = React.createRef(null);
    this.toggleit = this.toggleit.bind(this)
  }

toggleit(){
  this.ref1.current.classList.toggle('hide')
}

  render() { return (
      <div>
        <button type="button" onClick={this.toggleit}>Toggle it!</button>
        <div className='hide' ref={this.ref1} >
        <h1>About</h1>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        </div>
      </div>
    );
  }
}

نکات مثال دوم ری اکت رف

نکته 1: قطعه کد زیر را در کلاس بالا مشاهده نمایید!

this.ref1 = React.createRef(null);

میتوانید بگویید چه اتفاقی افتاده است؟ بله، ما یک رف ایجاد کردیم! به همین راحتی! فقط با یک خط!

نکته 2: قطعه کد زیر را ببینید!

<div className='hide' ref={this.ref1} >
<h1>About</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>

ایا میتوانید بگویید این تگ بزرگ دیو که داخلش یک تگ h1 و یک تگ p با یک پاراگراف متن لورم ایپسوم قرار گرفته قرار است کجای پروژه کوچک ما باشد؟ بله! قرار است به عنوان متنی باشد که با دکمه button بالای خودش محو شود و دوباره با کلیک دکمه بازگردد و نمایش داده شود. این اتفاق چگونه می افتد؟ وقتی کلاس hide به ان اضافه میشود این اتفاق می افتد. ما قبلا کلاس hide را اینگونه تعریف کردیم و به این صفحه import کردیم!

.hide{display:none}

نکته 3: سراغ button برویم! انجا که اتریبیوت onClick نوشته است و داخلش this.toggleit را مشاهده نمایید! هربار روی دکمه کلیک میشود تابع toggleit اجرا میشود!

<button type="button" onClick={this.toggleit}>Toggle it!</button>

نکته 4: کد زیر را ملاحظه کنید! متد toggleit را در وسط های کلاس About ملاحظه فرمایید! داخل ان نوشته ایم لیست کلاس های دیو زیرین خود را بگیرد و کلاس hide را به ان تاگل کند! تاگل به معنای این است که اگر کلاس وجود داشت ان کلاس موجود را حذف کند و اگر وجود نداشت، اضافه کند. تاگل یک متد جاوااسکریپت برای کنترل پروپرتی classList است.

toggleit(){
  this.ref1.current.classList.toggle('hide')
}

همچنین در کد بالا this.ref1.current را مشاهده میکنید. شما با استفاده از current به المنتی که ref1 به ان نسبت داده شده است دسترسی پیدا میکنید!

سوالی دارید؟

سوالی دارید که در متن به ان نرسیدید؟ میتوانید سوال از این مقاله به khanim97@gmail.com ارسال نمایید! هرروز ایمیل را چک میکنم.