Bolehkah ES6 Arrow Berfungsi Mengikat Kaedah Kelas Secara Kekal dalam Bertindak balas?

Cara Menggunakan Fungsi Anak Panah dalam Kelas ES6 sebagai Kaedah Kelas

Apabila pada mulanya memasukkan kelas ES6 ke dalam React, adalah amalan biasa untuk mengikat contoh kaedah secara eksplisit (seperti yang ditunjukkan dalam contoh di bawah). Walau bagaimanapun, persoalan utama timbul: adakah mungkin dengan ES6 untuk mengikat fungsi kelas secara kekal pada contoh kelas menggunakan fungsi anak panah, memudahkan penggunaannya sebagai panggilan balik?

class SomeClass extends React.Component {
  // Bound method
  constructor() {
    this.handleInputChange = this.handleInputChange.bind(this);
  }
}

CoffeeScript menawarkan fungsi ini, tetapi masih tidak jelas sama ada sesuatu yang serupa boleh dicapai dalam ES6.

class SomeClass extends React.Component {
  // Attempted arrow function binding
  handleInputChange(val) => {
    console.log('selectionMade: ', val);
  }
}

Soalan ini cuba untuk memahami sama ada fungsi anak panah boleh terikat secara kekal pada kejadian kelas dalam ES6, membolehkannya digunakan dengan mudah sebagai fungsi panggil balik, memastikan konteks yang betul apabila dihantar ke fungsi seperti setTimeout.

Penyelesaian: Membetulkan Sintaks

Percubaan asal untuk mentakrifkan kaedah kelas menggunakan fungsi anak panah mengandungi ralat sintaks kecil. Sintaks yang betul ditunjukkan di bawah:

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

Adalah penting untuk ambil perhatian bahawa sintaks ini memerlukan pengaktifan ciri percubaan dalam Babel untuk penyusunan yang berjaya. Dengan memasang pemalam yang diperlukan (transform-class-properties), anda boleh mendayakan ciri percubaan ini.

Selain itu, anda boleh mendapatkan perbincangan komprehensif tentang Medan Kelas dan Sifat Statik dalam dokumentasi cadangan rasmi.

Atas ialah kandungan terperinci Bolehkah ES6 Arrow Berfungsi Mengikat Kaedah Kelas Secara Kekal dalam Bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!