Mengapakah `this.setState` tidak ditentukan atau bukan fungsi dalam pengendali acara React saya?

Mengakses Instance React (ini) Dalam Pengendali Acara

Isu:

Apabila cuba untuk kemas kini keadaan React menggunakan this.setState dalam pengendali acara, anda mungkin menghadapi ralat seperti "Tidak boleh membaca sifat 'setState' yang tidak ditentukan" atau "this.setState bukan fungsi". Ini menunjukkan kata kunci ini tidak merujuk contoh komponen dalam pengendali acara.

Penjelasan:

Dalam komponen ES6 React, fungsi yang terikat pada komponen harus ditakrifkan dalam pembina atau terikat secara eksplisit dalam kaedah render menggunakan this.methodName.bind(this). Ini kerana sintaks fungsi anak panah JavaScript (cth., () =>) mencipta skop fungsi baharu dan tidak mengikatnya secara automatik pada komponen.

Penyelesaian:

Kaedah 1 (Mengikat dalam Pembina):

constructor(props) {
  super(props);
  this.state = { inputContent: 'startValue' };
  this.changeContent = this.changeContent.bind(this); // Binding here
}

Kaedah 2 (Mengikat dalam pemaparan):

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

Nota: Apabila menggunakan React. createClass, semua kaedah terikat secara automatik kepada komponen instance.

Pembetulan Tambahan:

Dalam kod anda, React.refs.someref hendaklah digantikan dengan this.refs.someref untuk mengakses rujukan elemen React. Selain itu, kaedah sendContent perlu diikat pada komponen menggunakan mana-mana kaedah pengikatan di atas.

Atas ialah kandungan terperinci Mengapakah `this.setState` tidak ditentukan atau bukan fungsi dalam pengendali acara React saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!