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

不知不觉中写博客已经成为了一种习惯，不仅仅是一种学习知识吧，也是一种清楚自己学习了那些的内容。在前面的博客中我们慢慢的介绍了一些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>
     }
}

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

写到标签内部

<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)
    }

}

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

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

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

希望对你有所帮助