Bagaimana untuk Menghantar Nilai kepada Acara onClick dalam React JS?

Meluluskan Nilai kepada Peristiwa onClick dalam React JS

Pengendali acara onClick React tidak membenarkan penghantaran nilai secara langsung. Apabila diklik, ia memaparkan objek SyntheticMouseEvent pada konsol. Untuk menghantar nilai dengan berkesan, ikuti penyelesaian berikut:

Cara Mudah

Gunakan fungsi anak panah:

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

Ini mencipta fungsi yang menggunakan handleSort dengan parameter yang dikehendaki.

Cara yang Lebih Baik

Ekstrak kod ke dalam subkomponen:

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

Ini memastikan pemaparan semula hanya apabila perlu.

Cara Mudah Lama (ES5)

Ikat fungsi pada konteks Komponen:

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

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