React基础教程(五):事件处理

事件处理

1、绑定事件

1.1、绑定方式1

js 复制代码
<Button size={"large"} type={"primary"} onClick={ ()=>{
                    console.log("Click1")
                } }>add1</Button>

1.2、绑定方式2

js 复制代码
<Button size={"large"} type={"primary"} onClick={ this.handlerClick2 }>add2</Button>

handlerClick2(){
    console.log("Click2")
}

1.3、绑定方式3

js 复制代码
<Button size={"large"} type={"primary"} onClick={ this.handlerClick3 }>add3</Button>

handlerClick3 = ()=>{
    console.log("Click3")
}

1.4、绑定方式4 (最为推荐此写法)

js 复制代码
<Button size={"large"} type={"primary"} onClick={ ()=>{
                    this.handlerClick4() // 比较推荐
                } }>add4</Button>
                
handlerClick4 = ()=>{
     console.log("Click4")
 }

1.5 完整代码

js 复制代码
import React, {Component} from "react";
import { Button, Input } from 'antd';

import './css/App.css'

export default class App extends Component {
    render() {
        return (
            <div style={{marginTop:10}}>
                <Input style={{width:300}} size={"large"}  />
                <Button size={"large"} type={"primary"} onClick={ ()=>{
                    console.log("Click1")
                } }>add1</Button>

                <Button size={"large"} type={"primary"} onClick={ this.handlerClick2 }>add2</Button>

                <Button size={"large"} type={"primary"} onClick={ this.handlerClick3 }>add3</Button>

                <Button size={"large"} type={"primary"} onClick={ ()=>{
                    this.handlerClick4() // 比较推荐
                } }>add4</Button>

            </div>
        )
    }

    handlerClick2(){
        console.log("Click2")
    }

    handlerClick3 = ()=>{
        console.log("Click3")
    }

    handlerClick4 = ()=>{
        console.log("Click4")
    }
}

2、事件handler的写法

一般推荐handlerClick4()的写法,也会方便传参数。

js 复制代码
import React, {Component} from "react";
import { Button, Input } from 'antd';

import './css/App.css'

export default class App extends Component {

    a = 35;
    render() {
        return (
            <div style={{marginTop:10}}>
                <Input style={{width:300}} size={"large"}  />
                <Button size={"large"} type={"primary"} onClick={ ()=>{
                    console.log("我能不能访问到 a= ", this.a)
                } }>add1</Button>&nbsp;

                {/*不推荐*/}
                <Button style={{backgroundColor:'#e37318',border:"none"}} size={"large"} type={"primary"} onClick={ this.handlerClick2.bind(this) }>add2-不推荐</Button>&nbsp;

                {/*比较推荐*/}
                <Button size={"large"} type={"primary"} onClick={ this.handlerClick3 }>add3-推荐</Button>&nbsp;

                {/*非常推荐*/}
                <Button style={{backgroundColor:'#2ba471', border:"none"}} size={"large"} type={"primary"} onClick={ ()=>{
                    this.handlerClick4() // 非常推荐,传参数
                } }>add4-推荐-传参</Button>

            </div>
        )
    }

    /*
    bind:改变this,手动执行函数
    call:改变this,自动执行函数
    apply:改变this,自动执行函数
     */

    // 不推荐这种写法
    handlerClick2(){
        console.log(this); // undefined
        console.log("Click2", this.a); // 报错
    }

    // 推荐写法,传参数就不太方便了
    handlerClick3 = ()=>{
        console.log("Click3", this.a) // 35。箭头函数
    }

    handlerClick4 = ()=>{
        console.log("Click4", this.a) // 35.箭头函数
    }


}

注意:

如果调用handlerClick2的时候this.handlerClick2.bind(this)这里不加 .bind(this),那么这里的 this 就无法获取,就是 undefined,调用 this.a 就会报错。

handlerClick3handlerClick4都是采用箭头函数的写法,可以正常获取到this

handlerClick4()的写法方便传递参数,最推荐用此写法。

相关推荐
Mintopia16 分钟前
🇨🇳 Next.js 在国内场景下的使用分析与实践指南
前端·后端·全栈
Mintopia35 分钟前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia35 分钟前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
木易 士心37 分钟前
CSS 样式用法大全
前端·css·1024程序员节
皓月Code37 分钟前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节
0129252038 分钟前
1.1 笔记 html 基础 初认识
前端·笔记·html
2501_929382651 小时前
[Switch大气层]纯净版+特斯拉版 20.5.0大气层1.9.5心悦整合包 固件 工具 插件 前端等资源合集
前端·游戏·switch·1024程序员节·单机游戏
非凡ghost1 小时前
Tenorshare 4DDiG(数据恢复软件) 最新版
前端·javascript·后端
非凡ghost1 小时前
WinMute(自动锁屏静音软件) 中文绿色版
前端·javascript·后端
7ayl2 小时前
Vue3 - Reactivity的核心流程
前端·vue.js