Bagaimanakah Saya Boleh Mengikat `ini` dengan Betul dalam Pengendali Acara React untuk Mengelakkan Ralat Konteks?

Memahami Kekaburan ini dalam Pengendali Acara React

Dalam React, pengendali acara yang mengikat kepada kejadian komponen memastikan mereka mempunyai akses kepada konteks ini. Walau bagaimanapun, pembangun mungkin menghadapi ralat semasa cuba mengakses this.setState atau this.refs dalam fungsi pengendali acara. Isu ini berpunca daripada kekaburan di sekeliling ini apabila terikat secara tersirat pada tika komponen.

Untuk menangani perkara ini, fungsi pengendali peristiwa mengikat kepada tika komponen sebelum menghantarnya sebagai prop. Ini memastikan pembolehubah ini dalam badan fungsi merujuk kepada contoh komponen dan bukan kepada objek tetingkap global.

Apabila menggunakan sintaks kelas ES6 React, pengikatan ini boleh dicapai dalam pembina melalui:

constructor(props) {
  super(props);
  this.changeContent = this.changeContent.bind(this);
}

Sebagai alternatif, dengan kaedah React.createClass, pengendali acara terikat secara automatik pada contoh komponen. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa:

• Mengikat fungsi mencipta fungsi baharu, jadi pertimbangkan untuk mengikatnya dalam pembina (menyala sekali) atau terus dalam pemaparan (mencipta fungsi baharu setiap pemaparan).

Contoh Ikatan Pembina:

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

Contoh render Mengikat:

render() {
  return <input onchange="{this.changeContent.bind(this)}">;
}

Selain itu, rujuk this.refs bukannya React.refs apabila mengakses rujukan komponen dalam pengendali acara.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengikat `ini` dengan Betul dalam Pengendali Acara React untuk Mengelakkan Ralat Konteks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!