۳۰
تیر

جلسه ۰۹ : رویداد ها در React JS

دسته‌بندی‌ها :

با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره آموزش React JS در خدمت شما عزیزان هستیم.
در این جلسه قصد داریم به آموزش رویداد ها در React JS بپردازیم.

فهرست

مقدمه

مانند React JS ، HTML نیز می‌تواند اعمالی را براساس رویداد های کاربر انجام دهد.

React رویداد هایی مشابه HTML مانند click, change ,mouseover و … دارد.

اضافه کردن رویداد

نام رویداد ها به صورت camelCase نوشته می‌شوند. (onClick)

کد مربوط به رویداد ها (مدیریت کننده خطا) نیز در {} قرار می‌گیرد. ( {}=onClick )

مثال:

مثال :

<button onClick={shoot}>Take the Shot!</button>

1	<button onClick={shoot}>Take the Shot!</button>

مدیریت کننده های رویداد

توصیه می‌شود تا کد های مربوط به مدیریت رویداد را در قالب متدی در کلاس کامپوننت ایجاد کنید.

مثال :

class Football extends React.Component {
  shoot() {
    alert("Great Shot!");
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

class Football extends React.Component {

shoot() {

alert("Great Shot!");

}

render() {

return (

);

}

ReactDOM.render(<Football />, document.getElementById('root'));

bind کردن کلمه کلیدی this

در متد ها، کلمه کلیدی this باید به کامپوننت صاحب متد اشاره کند.

به همین دلیل است که ما از توابع arrow استفاده می‌کنیم. در این نوع توابع کلمه کلیدی this همیشه به شی یا کامپوننتی که تابع را تعریف کرده است، اشاره می‌کند.

مثال :

class Football extends React.Component {
  shoot = () => {
    alert(this);
    /*
     کلمه کلیدی this به شی کامپوننت اشاره دارد
    */
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

class Football extends React.Component {

shoot = () => {

alert(this);

کلمه کلیدی this به شی کامپوننت اشاره دارد

}

render() {

return (

);

}

ReactDOM.render(<Football />, document.getElementById('root'));

چرا توابع Arrow؟

در کلاس کامپوننت ها، کلمه کلیدی this به صورت پیش‌فرض تعریف نشده است. به همین دلیل در توابع یا متد های معمولی، کلمه کلیدی this به شئ ای که تابع را فراخوانده است اشاره می‌کند که می‌تواند شی سراسری window، یک دکمه HTML و یا هر چیز دیگری باشد.

اگر می‌خواهید از توابع معمولی به جای توابع Arrow استفاده کنید، باید کلمه کلیدی this را به کامپوننت به اصطلاح bind کنید.

از متد ()bind برای bind کردن کلمه کلیدی this استفاده می‌شود.

در مثال زیر متد shoot را در متد سازنده bind کرده ایم:

مثال :

class Football extends React.Component {
  constructor(props) {
    super(props)
    this.shoot = this.shoot.bind(this)
  }
  shoot() {
    alert(this);
    /*
  حالا کلمه کلیدی this در این متد، به کامپوننت والد خود اشاره دارد. (Football)
    */
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

class Football extends React.Component {

constructor(props) {

super(props)

this.shoot = this.shoot.bind(this)

}

shoot() {

alert(this);

حالا کلمه کلیدی this در این متد، به کامپوننت والد خود اشاره دارد. (Football)

}

render() {

return (

);

}

ReactDOM.render(<Football />, document.getElementById('root'));

ارسال آرگومان

برای ارسال آرگومان به توابع یا متد های مدیریت کننده رویداد، دو روش داریم:

۱ – استفاده از توابع Arrow

مثال :

class Football extends React.Component {
  shoot = (a) => {
    alert(a);
  }
  render() {
    return (
      <button onClick={() => this.shoot("Goal")}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

class Football extends React.Component {

shoot = (a) => {

alert(a);

}

render() {

return (

<button onClick={() => this.shoot("Goal")}>Take the shot!</button>

);

}

ReactDOM.render(<Football />, document.getElementById('root'));

۲ – bind کردن مدیریت کننده خطا به this

توجه داشته باشید که اولین آرگومان آن باید this باشد.

مثال :

class Football extends React.Component {
  shoot(a) {
    alert(a);
  }
  render() {
    return (
      <button onClick={this.shoot.bind(this, "Goal")}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

class Football extends React.Component {

shoot(a) {

alert(a);

}

render() {

return (

);

}

ReactDOM.render(<Football />, document.getElementById('root'));

در مثال بالا اگر آرگومان را بدون bind کردن ارسال کنیم، تابع مدیریت کننده در زمان اجرای کامپوننت اجرا می‌شود.(به جای اینکه زمانی که روی دکمه کلیک می‌شود، اجرا شود)

جلسه رویداد ها در React JS نیز به پایان رسید.

در جلسه بعد به آموزش کار با فرم ها در React JS خواهیم پرداخت.

به اشتراک بگذارید

react js events ,آموزش react js ,آموزش کتابخانه reactjs ,رویداد های کلیک در react js

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

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۹ : رویداد ها در React JS

مقدمه

اضافه کردن رویداد

مدیریت کننده های رویداد

bind کردن کلمه کلیدی this

چرا توابع Arrow؟

ارسال آرگومان

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ