Bagaimanakah Saya Boleh Menyalurkan Nilai kepada Acara onClick dalam React?

React js: Menghantar Nilai kepada Acara onClick

Dalam React, mengakses sifat nilai acara onClick boleh mencabar, memaparkan mesej konsol seperti "SyntheticMouseEvent {...}" bukannya nilai yang dikehendaki. Ini boleh diselesaikan dengan memahami mekanisme pengendalian peristiwa React dan menggunakan teknik yang sesuai.

Cara Mudah

Untuk menghantar nilai kepada acara onClick menggunakan fungsi anak panah, ikut pendekatan ini:

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

Ini mencipta fungsi baharu yang memanggil handleSort dengan parameter yang betul.

Lebih baik Cara

Untuk prestasi optimum, disyorkan untuk mengekstrak pengendalian onClick ke dalam sub-komponen. Dengan cara ini, rujukan pengendali tidak akan berubah dan pemaparan semula yang tidak perlu akan dielakkan.

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}
  />
));}

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