Bagaimanakah Saya Menyalurkan Nilai kepada Peristiwa onClick dalam React?

Meluluskan Nilai kepada Peristiwa onClick dalam React

Dalam React, menghantar nilai kepada acara onClick boleh menjadi mencabar, yang membawa kepada output konsol yang tidak dijangka. Artikel ini meneroka dua kaedah untuk menyelesaikan isu ini.

Kaedah 1: Menggunakan Fungsi Anak Panah

Pendekatan paling mudah ialah menggunakan fungsi anak panah, yang menangkap konteks yang betul untuk acara:

return (
  <th value={column} onClick={() => this.handleSort(column)}>{column}</th>
);

Kaedah 2: Mencipta Sub-Komponen

Penyelesaian yang lebih berstruktur ialah mencipta sub-komponen yang mengendalikan acara onClick:

Sub-Komponen (ES6)

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th>
        <button onClick={this.handleClick}>{this.props.column}</button>
      </th>
    );
  }
}

Komponen Utama (ES6)

return (
  {this.props.defaultColumns.map((column) => (
    <TableHeader
      value={column}
      onHeaderClick={this.handleSort}
    />
  ))}

Kaedah Lama untuk ES5

Dalam ES5, anda boleh menggunakan .bind:

return (
  <th value={column} onClick={this.handleSort.bind(this, column)}>{column}</th>
);

Oleh menggunakan kaedah ini, anda boleh menghantar nilai secara berkesan kepada acara onClick dalam aplikasi React anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Menyalurkan Nilai kepada Peristiwa onClick dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!