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

女爷i 2022-09-05 14:57 198阅读 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][]

## 写到标签内部 ##

这个地方就是添加了一个函数，当我们点击按钮的时候控制台输出  “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

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

这样在页面刷新的时候 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)
        }
    
    }

上面就是我们被button绑定一个事件，那么需要注意几点：

1. 事件绑定的时候onClick 写法固定，必须是峰驼式的方式命名

2. 在后面的方法中，我们最好使用箭头的函数，这样能为函数传递参数

希望对你有所帮助

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/71607824e91f474c9480bb45fe66cedc.png