Saya baru menggunakan kelas ES6 dengan React, sebelumnya saya telah mengikat metode saya ke objek saat ini (tunjukkan dalam contoh pertama), tetapi apakah ES6 memungkinkan saya untuk secara permanen mengikat fungsi kelas ke instance kelas dengan panah dengan kelas? (Berguna saat melewati sebagai fungsi panggilan balik.) Saya mendapatkan kesalahan ketika saya mencoba menggunakannya sesuka Anda dengan CoffeeScript:
class SomeClass extends React.Component {
// Instead of this
constructor(){
this.handleInputChange = this.handleInputChange.bind(this)
}
// Can I somehow do this? Am i just getting the syntax wrong?
handleInputChange (val) => {
console.log('selectionMade: ', val);
}
Sehingga jika saya harus meneruskan SomeClass.handleInputChange
ke, misalnya setTimeout
, itu akan dicakup ke instance kelas, dan bukan window
objek.
Jawaban:
Sintaks Anda sedikit tidak aktif, hanya kehilangan tanda sama dengan setelah nama properti.
Ini adalah fitur eksperimental. Anda perlu mengaktifkan fitur eksperimental di Babel agar dapat dikompilasi. Ini adalah demo dengan percobaan diaktifkan.
Untuk menggunakan fitur eksperimental dalam babel Anda dapat menginstal plugin yang relevan dari sini . Untuk fitur spesifik ini, Anda memerlukan
transform-class-properties
plugin :Anda dapat membaca lebih lanjut tentang proposal untuk Bidang Kelas dan Properti Statis di sini
sumber
=
dihandleInputChange =
Tidak, jika Anda ingin membuat terikat, metode khusus contoh Anda harus melakukannya di konstruktor. Namun, Anda dapat menggunakan fungsi panah untuk itu, alih-alih menggunakan
.bind
metode prototipe:Ada proposal yang mungkin memungkinkan Anda untuk menghilangkan
constructor()
dan langsung menempatkan tugas dalam ruang lingkup kelas dengan fungsi yang sama, tetapi saya tidak akan merekomendasikan untuk menggunakannya karena sangat eksperimental.Atau, Anda selalu dapat menggunakan
.bind
, yang memungkinkan Anda untuk mendeklarasikan metode pada prototipe dan kemudian mengikatnya ke instance dalam konstruktor. Pendekatan ini memiliki fleksibilitas yang lebih besar karena memungkinkan memodifikasi metode dari luar kelas Anda.sumber
Saya tahu pertanyaan ini sudah cukup dijawab, tetapi saya hanya memiliki sedikit kontribusi (bagi mereka yang tidak ingin menggunakan fitur eksperimental). Karena masalah harus mengikat beberapa fungsi mengikat dalam konstruktor dan membuatnya terlihat berantakan, saya datang dengan metode utilitas yang pernah terikat dan memanggil konstruktor, apakah semua metode yang diperlukan mengikat untuk Anda secara otomatis.
Asumsikan saya memiliki kelas ini dengan konstruktor:
Terlihat berantakan, bukan? Sekarang saya membuat metode utilitas ini
Yang perlu saya lakukan sekarang adalah mengimpor utilitas itu, dan menambahkan panggilan ke konstruktor saya, dan saya tidak perlu mengikat setiap metode baru di konstruktor lagi. Konstruktor baru sekarang terlihat bersih, seperti ini:
sumber
shouldComponentUpdate
dangetSnapshotBeforeUpdate
Anda menggunakan fungsi panah dan juga mengikatnya di konstruktor. Jadi Anda tidak perlu melakukan pengikatan saat Anda menggunakan fungsi panah
ATAU Anda harus mengikat fungsi hanya di konstruktor ketika Anda menggunakan fungsi normal seperti di bawah ini
Juga tidak mengikat fungsi secara langsung di render. Itu harus selalu dalam konstruktor
sumber