Apakah beberapa cara untuk menulis peristiwa klik tindak balas?

Menulis: 1. Gunakan "onClick={this.handleClick}"; this.handleClick(params)}".

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah beberapa cara untuk menulis peristiwa klik tindak balas

Mari kita mula-mula berikan cara yang betul untuk menulis acara untuk butang:

Tambah untuk butang Cara yang betul untuk menulis acara onclick ialah

• tanpa lulus parameter

// handleClick ditakrifkan dengan onClick = { this.handleClick }

// handleClick用箭头函数定义时，为onClick添加事件应该这么写：<Button onClick = { this.handleClick }></Button></p>
<p>handleClick ditakrifkan seperti berikut: </p>
<pre class="brush:php;toolbar:false">handleClick = () => { // do something here};

atau

// handleClick digunakan (fungsi biasa) untuk mentakrifkan
onClick = { this.handleClick.bind(this) }

// handleClick用普通函数定义时，为onClick添加事件应该这么写：<Button onClick = { this.handleClick.bind(this) }></Button>

handleClick ditakrifkan seperti berikut:

handleClick () { // do something here }

• Pas parameter

// handleClick boleh ditakrifkan menggunakan /(fungsi biasa)
onClick = { (params) => this.handleClick (params) }

 // handleClick可以是箭头函数，也可以是普通函数<Button onClick = { (params) => this.handleClick(params) }></Button>

Mari kita analisa mengapa penulisan seperti ini betul:

Analisis arah ini

Fahami masalah ini dengan ayat berikut:

Fungsi anak panah tidak mempunyai ini sendiri, jadi ini adalah: ini konteks apabila ia ditakrifkan
Fungsi biasa mempunyai ini sendiri, jadi ini ialah: ini konteks apabila ia dilaksanakan

Mari kita lihat cara pertama penulisan:

1. onClick = { this.handleClick } Fungsi anak panah

Kod yang diberikan di bawah ialah : Tambah acara onclick untuk butang (jsx lengkap)

// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component {
    // 2. 定义handleClick事件
    handleClick = () => {
        console.log(this); //3. this指向examplePage
    }

    render() {
        return (
            <p>
            // 1. 为onClick绑定 handleClick事件处理函数
                <Button onClick = { this.handleClick }>click me</Button>
            </p>
        )
    }}export default examplePage;

Klik butang dan cetak ini menunjuk ke contohHalaman:

ini: examplePage {props: Object, context : {}, refs: {}, updater: Object, state: {}, …}

Analisis:

• Apabila Butang diklik, pengendali acara handleClick dipanggil
• Oleh kerana handleClick ialah fungsi anak panah, jadi ini adalah konteks definisi,
• handleClick ditakrifkan dalam class examplePage. ,
• jadi ini menunjuk ke examplePage
• Lihat apa yang berlaku jika fungsi anak panah ditukar kepada fungsi biasa:

2. this.handleClick.bind(this) } Fungsi biasa

Mari kita lihat dahulu apa console.log(this) akan keluarkan jika bind(this) tidak digunakan:

// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component {
    // 2. !将箭头函数改为普通函数
    handleClick () {
        console.log(this); // 3. this 为 undefined
    }

    render() {
        return (
            <p>
            // 1. 为onClick绑定 handleClick事件处理函数
                <Button onClick = { this.handleClick }>click me</Button>
            </p>
        )
    }}export default examplePage;

Klik butang untuk mencetak ini:

ini: tidak ditentukan

Analisis:

• Apabila Butang diklik, acara handleClick fungsi pemprosesan dipanggil,
• Oleh kerana handleClick ialah fungsi biasa, ini adalah konteks pelaksanaan Ini,
• handleClick dilaksanakan apabila Butang diklik pada halaman Konteksnya ialah halaman html 🎜>
, jadi ini tidak ditentukan dan tidak menunjukkan contohHalaman

Nota: Dalam versi yang ketat, lalai ini bukan tetingkap lagi, tetapi tidak ditentukan

Kod modul sentiasa kod mod ketat.
Semua bahagian ClassDeclaration atau ClassExpression ialah kod mod ketat.

Jadi anda perlu menggunakan bind untuk menukar penunjuk ini, iaitu:

render() {
    return (
        <p>
        // 用bind改变this指向
           <Button onClick = { this.handleClick.bind(this) }>click me</Button>
        </p>
    )}

Analisis:

Apabila Butang diklik, fungsi pemprosesan acara handleClick dipanggil,
Melalui fungsi bind(), luluskan fungsi render ini (menunjuk ke class examplePage) sebagai pembolehubah ke dalam handleClick
• Pada asalnya handleClick ialah fungsi biasa, dan ini adalah konteks pelaksanaan ini (iaitu undefined ), tetapi kerana bind(this) diluluskan dalam - - this
• menunjuk ke examplePage, jadi pada masa ini, ini menunjuk ke examplePage, menyelesaikan masalah ini tidak dapat ditentukan

Difahamkan Daripada dua di atas, yang terakhir mudah difahami:

3. onClick = { (params) => this.handleClick(params) } Fungsi biasa/anak panah boleh digunakan

render() {
    return (
        <p>
        // 通过箭头函数传参
           <Button onClick = { (params) => this.handleClick(params) }></Button>
        </p>
    )}

Analisis:

Melalui parameter melalui fungsi anak panah adalah bersamaan dengan onClick mengikat fungsi anak panah
• Apabila Butang diklik, (params) dipanggil => ; this.handleClick(params) ialah fungsi anak panah, jadi inilah konteksnya apabila ia ditakrifkan,
• handleClick ditakrifkan dalam class examplePage,
• jadi ini menunjuk ke examplePage
• Menurut idea ini, selagi peristiwa tindak balas onClick ditulis dengan fungsi anak panah, dan apabila dipanggil, ini menunjukkan kepada kelas komponen, tidak akan ada masalah

Kemudian, tiada parameter yang berlalu masa, tulis sahaja seperti ini:

<Button onClick = { () => this.handleClick() }></Button>

Tetapi ini tidak boleh dilaksanakan, kerana react akan terus menghuraikan () => this.handleClick(), handleClick akan dipanggil, yang bersamaan dengan onClick = "Panggil handleClick "

Jadi, apabila tiada parameter diluluskan, anda hanya boleh menulis seperti ini:

<Button onClick = { this.handleClick }></Button>

Ringkasan

Tiga soalan pertama boleh dijawab

• 什么情况下需要bind(this)？
  答： onClick传入的事件处理函数是普通函数的时候，需要bind(this)来改变指向
• 为什么要用bind(this)?
  答：如果不用bind(this), this会指向undefined
• 可以不用bind(this)吗？
  答：用箭头函数 (用箭头函数定义事件处理函数）

//定义handleClick事件
handleClick = () => {
      // do something here
};

//为onClick绑定handleClick事件处理函数
<Button onClick = {this.handleClick}></Button> // 不传参
<Button onClick = {（param) => this.handleClick(param) }></Button> // 传参

推荐学习：《react视频教程》

Atas ialah kandungan terperinci Apakah beberapa cara untuk menulis peristiwa klik tindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!