React 项目--button 绑定事件（15）

女爷i 2022-09-05 14:57 263阅读 0赞

不知不觉中写博客已经成为了一种习惯，不仅仅是一种学习知识吧，也是一种清楚自己学习了那些的内容。在前面的博客中我们慢慢的介绍了一些react基本的语法，现在我们继续来react按钮绑定事件

环境准备

首先我们创造一个组件，并且在组件上添加一个按钮

import React from 'react'
import ReactDOM from 'react-dom'
export default class BindEvent extends React.Component{
     constructor(){
        super()
        this.state={}
     }
     render(){
        return <div>
            <p>BindEvent 组件</p>
        <hr />
            <button>按钮</button>
        </div>
     }
}

我们来预览一下这个组件：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70

写到标签内部

<button onClick={function(){console.log("22")}}>按钮</button>

这个地方就是添加了一个函数，当我们点击按钮的时候控制台输出 “22”

function 是一个匿名的函数，我们在javascript 编写代码的时候，匿名函数有两种方式书写一个是用箭头函数，一个是function，上面的function我们编写成为箭头函数如下：

<button onClick={()=>{console.log("22")}}>按钮</button>

写到标签外部

这个是我们把函数直接写到按钮的标签里面了，当然如果说函数执行的内容比较少，我们可以这样来写，但是如果比较多的话，那么我们这个语句会看着很繁琐，那么我们就要想办法将这个函数从语句中抽离出来

export default class BindEvent extends React.Component{
     constructor(){
        super()
        this.state={}
     }
     render(){
        return <div>
            <p>BindEvent 组件</p>
        <hr />
            <button onClick={this.btnClickFunc}>按钮</button>
        </div>
     }
    btnClickFunc(){
        console.log("22222222222");
    }
}

这个是抽离，我们在类中创建了一个实例的函数，并且点击按钮的时候执行 this.btnClickFunc

需要注意的时候，此处不能这样写：

<button onClick={this.btnClickFunc()}>按钮</button>

这样在页面刷新的时候 btnClickFunc 方法就会被执行，而不是在点击按钮的时候

方法后面添加上括号，那么在初始化的时候就会调用该方法，但是我们换一种方式，使用箭头的函数就不一样了：

<button onClick={()=>{this.btnClickFunc()}}>按钮</button>

这里我们就看到了箭头函数的优势，在onClick 中我们使用箭头函数，在箭头函数里面我们调用其他的方法，这样在刷新页面的时候就不会调用btnClickFunc方法，而是在点击按钮的时候执行。

那么我们就可以在onClick 中使用这一种模式，如果调用的函数包含参数的话，似乎只能使用这一种方式、

export default class BindEvent extends React.Component{
     constructor(){
        super()
        this.state={}
     }
     render(){
        return <div>
            <p>BindEvent 组件</p>
        <hr />
            <button onClick={()=>{this.show('wdg')}}>按钮</button>
        </div>
     }
    btnClickFunc(){
        console.log("22222222222");
    }
    show(name){
        console.log(name)
    }
}