Hadisələrin Emal Edilməsi

React elementlərində hadisələrin emal edilməsi DOM elementlərindəkinə bənzəyir. Amma bəzi sintaktik fərqlər var:

• React hadisələrinə lowercase yox camelCase istifadə edilərək ad verilir.
• JSX ilə string yerinə funksiya hadisə işlədicisi kimi ötürülür.

Misal üçün aşağıdakı HTML:

<button onclick="activateLasers()">
  Lazerləri aktivləşdir
</button>

React-dəkindən bir az fərqlidir:

<button onClick={activateLasers}>  Lazerləri aktivləşdir
</button>

Başqa bir fərq ondan ibarətdir ki, React-də false qaytarmaqla default davranışın qarşısını almaq olmur. Bunu etmək üçün preventDefault açıq şəkildə çağırılmalıdır. Məsələn, sadə HTML ilə linkin ilkin davranışını (yeni səhifə açmaq) ləğv etmək üçün belə yaza bilərsiniz:

<a href="#" onclick="console.log('Linkə tıklandı.'); return false">
  Mənə tıkla
</a>

React-də bunu belə yazmaq olar:

function Form() {
  function handleSubmit(e) {
    e.preventDefault();    console.log('Linkə tıklandı.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Mənə tıkla
    </a>
  );
}

Burada e sintetik hadisədir. React sintetik hadisələri W3C spesifikasiyasına uyğun olaraq təyin edir. Bu deməkdir ki, brauzerlər arası uyğunsuzluqlardan narahat olmaq lazım deyil. React hadisələri nativ hadisələr kimi eyni işləmirlər. Ətraflı məlumat üçün SyntheticEvent təlimatına nəzər yetirin.

React istifadə edərkən DOM elementi yarandıqdan sonra işləyici əlavə etmək üçün addEventListener çağırmağa ehtiyac yoxdur. Əvəzinə, işləyicini element ilk dəfə render olunduqda təmin edin.

Komponent ES6 sinfi kimi təyin olunduqda hadisə işləyicisi sinfin metodlarından biri ola bilər. Məsələn, aşağıdakı Toggle komponenti istifadəçiyə “ON” və “OFF” halları arasında dəyişməyə imkan verən düyməyə render olunur:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // Bu binding `this`-in callback-də işləməsi üçün önəmlidir    this.handleClick = this.handleClick.bind(this);  }

  handleClick() {    this.setState(prevState => ({      isToggleOn: !prevState.isToggleOn    }));  }
  render() {
    return (
      <button onClick={this.handleClick}>        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

CodePen-də bax

JSX callback-lərində this ilə işləyərkən ehtiyatlı olmaq lazımdır. JavaScript-də sinif metodları ilkin olaraq kontekstə bağlanmayıb (bind). Əgər this.handleClick-i bağlamasaq və onu onClick-ə ötürməyi unutsaq, funksiya çağırıldıqda this undefined olacaq.

Bu spesifik olaraq React-ə aid davranış deyil, JavaScript-də funksiyalar ümumiyyətlə belə işləyir. Metodu sonunda mötərizəsiz istifadə etməklə də bağlamaq olar. Məsələn: onClick={this.handleClick}.

Əgər bind xoşunuza gəlmirsə, iki alternativ yolunuz var. Birincisi sınaq vəziyyətində olan public sinif sahələri sintaksisi istifadə etməkdir. Bu sahələri callback-ləri düzgün bağlamaq üçün istifadə etmək olar:

class LoggingButton extends React.Component {
  // Bu sintaksis `this`-in handleClick-ə bind olunduğuna zəmanət verir.  // Diqqət: bu *experimental* sintaksisdir.  handleClick = () => {    console.log('this is:', this);  };
  render() {
    return (
      <button onClick={this.handleClick}>
        Mənə tıkla
      </button>
    );
  }
}

Bu sintaksis Create React App-da ilkin olaraq qoşulub.

Əgər sahə sintaksisi istifadə etmirsinizsə, onda callback-də arrow funksiyaları istifadə edə bilərsiniz:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // Bu sintaksis `this`-in handleClick-ə bind olunduğuna zəmanət verir    return (      <button onClick={() => this.handleClick()}>        Tıkla
      </button>
    );
  }
}

Bu sintaksisin çatışmazlığı ondan ibarətdir ki, hər dəfə LoggingButton render olanda yeni callback yaradılır. Əksər hallarda bu problem deyil. Lakin əgər bu callback prop kimi uşaq komponentlərə ötürülürsə, onda həmin komponentlər əlavə render işi görə bilər. Belə performans problemlərini aradan qaldırmaq üçün konstruktorda bağlamaq və ya sinif sahələri sintaksisindən istifadə etmək məsləhət görülür.

Arqumentlərin hadisə işləyicilərinə ötürülməsi

Tsıklın daxilindən hadisə işləyicisinə əlavə parametr ötürmək lazım ola bilər. Məsələn, əgər id sıra ID-sidirsə aşağıdakı variantlardan birini istifadə etmək olar:

<button onClick={(e) => this.deleteRow(id, e)}>Sıranı sil</button>
<button onClick={this.deleteRow.bind(this, id)}>Sıranı sil</button>

Bu iki sətir eyni işi görür, və müvafiq olaraq arrow funksiyaları və Function.prototype.bind istifadə edir.

Hər iki halda, React hadisəsini təmsil edən e arqumenti, ID-dən sonra ikinci parametr kimi ötürüləcək. Arrow funksiyaları istifadə etdikdə bu arqument açıq şəkildə ötürülür, lakin bind ilə bu avtomatik baş verir.