• 技术文章 >web前端 >前端问答

    react点击事件的几种写法是什么

    长期闲置长期闲置2022-04-22 10:28:08原创401

    写法:1、用“onClick={this.handleClick}”;2、用“onClick={this.handleClick.bind(this)}”;3、用“{(params)=>this.handleClick(params)}”。

    本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

    react点击事件的几种写法是什么

    开门见山,先直接给出为一个button添加一个事件的正确写法:

    为一个button添加一个onclick事件的正确写法

    // handleClick用 <箭头函数> 定义
    onClick = { this.handleClick }

    // handleClick用箭头函数定义时,为onClick添加事件应该这么写:<Button onClick = { this.handleClick }></Button>

    handleClick这么定义:

    handleClick = () => { // do something here};

    // handleClick用 (普通函数) 定义
    onClick = { this.handleClick.bind(this) }

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

    handleClick这么定义:

    handleClick () { // do something here }

    // handleClick用 <箭头函数>/(普通函数) 定义都可以
    onClick = { (params) => this.handleClick(params) }

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

    接下来分析一下为什么这样写是正确的:

    this的指向分析

    理解这个问题,带着下面这几句话去理解:

    箭头函数,没有自己的this,所以它的this是 : 定义时上下文 的this
    普通函数,有自己的this,所以它的this是:执行时上下文的this

    先来看第一种写法:

    1. onClick = { this.handleClick } + 箭头函数

    下面给出的代码为:为一个按钮添加onclick事件(一个完整的jsx)

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

    点击按钮,打印出指向examplePage的this:

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

    分析:

    2. onClick = { this.handleClick.bind(this) } + 普通函数

    先来看,如果不用bind(this),console.log(this)会输出什么:

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

    点击按钮,打印出this:

    this: undefined

    分析:

    注:在严格版中,默认的this不再是window,而是undefined
    Module code is always strict mode code.
    All parts of a ClassDeclaration or ClassExpression are strict mode code.

    因此需要用bind来改变this指向,即:

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

    分析:

    理解了上面两个,最后一个就很好理解了:

    3. onClick = { (params) => this.handleClick(params) } + 普通函数/箭头函数都可

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

    分析:

    那么,不传参的时候,就这么写:

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

    但这是不可行的,因为react会直接解析()=> this.handleClick(), handleClick会被调用,相当于onClick = “调用handleClick的结果”

    所以,不传参数的时候只能这么写:

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

    总结
    开头的三个问题可以得到回答

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

    推荐学习:《react视频教程

    以上就是react点击事件的几种写法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:jquery怎么删除div内所有子元素 下一篇:react阻止事件冒泡的方法是什么
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• react中antd和dva是什么意思• react中npm怎么安装路由• react sketch是什么• react native怎么删除组件• react和vue的路由有什么区别
    1/1

    PHP中文网