React：事件处理，点击事件（无参&有参）

最新推荐文章于 2023-08-17 17:22:46 发布

Jay丶萧邦

最新推荐文章于 2023-08-17 17:22:46 发布

阅读量652

点赞数 1

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_42543244/article/details/124965073

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

准备：

无参数传递：

错误写法：

1. 利用bind更改this指向，生成新的函数，比较麻烦

2. 简化1方法，在点击时使用bind更改this指向

3. 利用回调函数

4.使用箭头函数，强烈推荐，简单实用

有参数写法：

1. 利用bind更改this指向传递参数

2. 利用回调函数传递参数

本篇记录总结react的事件处理，点击事件，总分为两大类：无传递参数和有传递参数

准备：

新建一个html，引入js库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    const app = document.getElementById('app');

    class Demo extends React.Component {
        render() {
            return (
                <div>
                   
                </div>
            );
        }
    }

    ReactDOM.render(<Demo/>, app)
</script>
</body>
</html>

无参数传递：

错误写法：

    class Demo extends React.Component {
        click() {
            console.log('点击了', this)
        }

        render() {
            return (
                <div>
                    <button onClick={this.click}>点击</button>
                </div>
            );
        }
    }

虽然当我们点击按钮的时候，控制台输出 -点击了，但是this却是一个undefined，如下

很显然，这么写是不对的，那么造成this是undefined的原因是什么？

在JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined

那么我们通常有以下几种写法：

1. 利用bind更改this指向，生成新的函数，比较麻烦

class Demo extends React.Component {
        //1. 使用bind更改this指向生成一个新的函数
        clickNoParamsFunc = this.clickNoParams1.bind(this)
        clickNoParams1() {
            console.log('使用bind更改this指向，不携带参数', this)
        }
        render() {
            //2.调用1步骤中生成的新函数方法
            return (
                <div>
                    <button onClick={this.clickNoParamsFunc}>点击不携带参数1</button>
                </div>
            );
        }
    }

2. 简化1方法，在点击时使用bind更改this指向

    class Demo extends React.Component {
        clickNoParams2() {
            console.log('不携带参数', this)
        }
        render() {
            return (
                <div>
                    <button onClick={this.clickNoParams2.bind(this)}>点击不携带参数2</button>
                </div>
            );
        }
    }

3. 利用回调函数

    class Demo extends React.Component {
        clickNoParams3() {
            console.log('不携带参数', this)
        }

        render() {
            return (
                <div>
                    <button onClick={e => this.clickNoParams3(e)}>点击不携带参数3</button>
                </div>
            );
        }
    }

4.使用箭头函数，强烈推荐，简单实用

    class Demo extends React.Component {
        clickNoParams4 = () => {
            console.log('不携带参数', this)
        }

        render() {
            return (
                <div>
                    <button onClick={this.clickNoParams4}>点击不携带参数4</button>
                </div>
            );
        }
    }

有参数写法

大致分为两种写法

1. 利用bind更改this指向传递参数

    class Demo extends React.Component {
        clickHaveParams1(arg1, arg2, e) {
            console.log(arg1, arg2, e)  //e:表示当前的事件对象,需要写在最后
            console.log(this)
        }
        render() {
            return (
                <div>
                    <button onClick={this.clickHaveParams1.bind(this, '参数1', '参数2')}>点击携带参数1</button>
                </div>
            );
        }
    }

打印输出：

2. 利用回调函数传递参数

函数声明成普通函数或者箭头函数都可以

    class Demo extends React.Component {
        clickHaveParams2(a, b, e) {
            console.log(a, b, e)  //e表示当前的事件对象
            console.log(this)
        }

        clickHaveParams3 = (a, b, e) => {
            console.log(a, b, e)
            console.log(this)
        }

        render() {
            return (
                <div>
                    <button onClick={e => this.clickHaveParams2('参数1', '参数2', e)}>点击携带参数2</button>
                    <button onClick={e => this.clickHaveParams3('参数1', '参数2', e)}>点击携带参数3</button>
                </div>
            );
        }
    }

个人推荐写法

我个人的话，比较推荐的是箭头函数的写法，这样代码的风格可以保持一致，而且简单实用，大概如下

    class Demo extends React.Component {
        click1 = () => {
            console.log('this===>', this)
        }

        click2 = (id, e) => {
            console.log('id===>', id)
            console.log('e===>', e)
            console.log('this===>', this)
        }

        render() {
            const {click1, click2} = this
            return (
                <div>
                    <button onClick={click1}>点击无携带参数</button>
                    <button onClick={e => click2(999, e)}>点击携带参数</button>
                </div>
            );
        }
    }

Jay丶萧邦

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React：事件处理，点击事件（无参&有参）

目录上一篇：准备：无参数传递：错误写法：1. 利用bind更改this指向，生成新的函数，比较麻烦2. 简化1方法，在点击时使用bind更改this指向3. 利用回调函数4.使用箭头函数，强烈推荐，简单实用有参数写法：1. 利用bind更改this指向传递参数2. 利用回调函数传递参数个人推荐写法：上一篇：React：使用Refs的正确姿势，三种方式调用_Jay丶千珏的博客-CSDN博客本篇记录总结react的事件处理，点击事件，总分为两.
复制链接

扫一扫