Bagaimana untuk Menyalurkan Nilai kepada Peristiwa onClick dalam React?

Melalukan Nilai kepada Peristiwa onClick dalam React

Pengendali acara onClick React tidak menerima parameter secara asli. Apabila onClick dicetuskan, ia memaparkan sifat peristiwa sintetik tanpa sebarang pemindahan nilai eksplisit. Untuk mengatasinya, beberapa pendekatan boleh digunakan:

Fungsi Anak Panah (Cara Mudah)

Fungsi anak panah boleh digunakan untuk menghantar nilai secara manual kepada pengendali onClick:

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

Ini mencipta fungsi baharu yang memanggil handleSort dengan parameter yang dikehendaki. Walau bagaimanapun, penciptaan fungsi yang berlebihan boleh menyebabkan pemaparan semula yang tidak perlu.

Sub-Komponen (Kaedah Optimum)

Mengekstrak pengendali menjadi subkomponen meningkatkan prestasi dengan menghalang berlebihan pemaparan semula:

Subkomponen

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

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

Komponen Utama

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

Legasi ES5 Pendekatan (Cara Mudah)

Untuk ES5 keserasian, pendekatan berikut boleh melepasi nilai menggunakan .bind:

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

Dengan memilih teknik yang paling sesuai, anda boleh menghantar nilai secara berkesan kepada peristiwa onClick dalam React dan mengelakkan isu yang digariskan dalam soalan.

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