Mengapa dan Bila Kita Perlu Mengikat Fungsi dan Pengendali Acara dalam Reaksi?

Mengapa dan Bila Kita Harus Mengikat Fungsi dan Pengendali Acara dalam React?

Dalam React, konteks kaedah kelas tidak terikat secara lalai. Apabila mengakses keadaan komponen atau prop dalam kaedah ini, adalah perlu untuk mengikat konteksnya.

Pilihan Mengikat Fungsi

Terdapat beberapa cara untuk mengikat fungsi:

1. Ikatan Pembina:

class SomeClass extends Component {
  constructor() {
    super();
    this.someEventHandler = this.someEventHandler.bind(this);
  }

  someEventHandler(event) {}
}

2. Fungsi Anak Panah Gemuk:

class SomeClass extends Component {
  someEventHandler = (event) => {
  };
}

3. Pengikatan Fungsi Lambda Sebaris:

onChange={(event) => this.someEventHandler(event)}

4. .bind() Kaedah Pengikatan:

onChange={this.someEventHandler.bind(this)}

Pilihan Pengikatan Pengendali Acara

1. Ikatan Fungsi Lambda Sebaris:

onChange={(event) => this.someEventHandler(event)}

2. .bind() Pengikatan Kaedah:

onChange={this.someEventHandler.bind(this)}

Memilih Kaedah Pengikatan

Kaedah pengikatan yang sesuai bergantung pada struktur komponen dan fungsi yang diperlukan:

Pra-binding (Fungsi Ikatan Pembina atau Anak Panah Lemak):

• Gunakan apabila fungsi memerlukan akses kepada keadaan komponen atau prop.

Runtime Binding (Inline Lambda Function Binding or .bind() Method):

• Gunakan apabila fungsi tidak mengakses keadaan komponen atau prop.
• Membenarkan parameter tambahan untuk diserahkan kepada pengendali.

Melalui Parameter Tambahan:

• Untuk pra-ikatan, lulus parameter sebagai argumen fungsi dalam pembina atau gunakan lemak fungsi anak panah dengan parameter tambahan.
• Untuk pengikatan masa jalan, gunakan fungsi lambda sebaris atau .bind() dengan parameter tambahan.

Contoh Penggunaan

Dalam kod yang disediakan coretan:

render() {
  return <input onChange={this.someEventHandler.bind(this)} />;
}

Ini ialah pengikatan masa jalan menggunakan kaedah .bind(), yang mengikat konteks someEventHandler kepada contoh komponen.

render() {
  return ;
}

Ini ialah pengikatan masa jalan menggunakan fungsi lambda sebaris, yang turut mengikat konteks someEventHandler kepada tika komponen.

render() {
  return <input onChange={this.someEventHandler} />;
}

Ini ialah pengikatan masa jalan tanpa sebarang parameter tambahan. Walau bagaimanapun, adalah disyorkan untuk pra-mengikat fungsi someEventHandler dalam pembina atau menggunakan fungsi anak panah lemak untuk memastikan konteks yang betul dikekalkan.

Atas ialah kandungan terperinci Mengapa dan Bila Kita Perlu Mengikat Fungsi dan Pengendali Acara dalam Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!