不知不觉中写博客已经成为了一种习惯，不仅仅是一种学习知识吧，也是一种清楚自己学习了那些的内容。在前面的博客中我们慢慢的介绍了一些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. 在后面的方法中，我们最好使用箭头的函数，这样能为函数传递参数

希望对你有所帮助

React 项目--button 绑定事件（15）相关推荐

html与js项目引入react框架之绑定事件
一.react的引入需要引入三个文件 1.react.js https://unpkg.com/react@17/umd/react.development.js https://unpkg.com ...
spinbox 上下箭头事件_[React] 3 - 自动绑定 (事件绑定)
1. 自动绑定 (事件绑定) 绑定this: React为什么要这么做? 是js中this绑定方式决定的,和react工作方式无关. 函数处理, 是作为回调传递的,这样就会丢失了上下文, 所以this ...
在html中搜索按钮事件,html中button绑定点击事件的几种方法介绍
HTML中为button绑定事件的方式有三种. 例如以下标签: submit 一.使用jquery进行绑定$('#btn_submit').click(function(){ }); 二.使用原生js ...
Android_安卓为按钮控件绑定事件的五种方式
写在最前面本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick=& ...
android如何绑定事件,Android_安卓为按钮控件绑定事件的五种方式
一.写在最前面本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...
React 在body上绑定事件以及阻止事件冒泡
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>R ...
这就是为什么我们需要在React的类组件中绑定事件处理程序
by Saurabh Misra 索拉·米斯拉(Saurabh Misra) 这就是为什么我们需要在React的类组件中绑定事件处理程序 (This is why we need to bind ev ...
react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
JSX详解React的事件绑定事件参数的传递
一.认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢? 它不是一段字符串(因为没有使用引号包裹),它看起来是一段HTML原生,但是我们能在js中直接给一个变量赋值html吗? 其实是 ...

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

环境准备

写到标签内部

写到标签外部

React 项目--button 绑定事件（15）相关推荐

最新文章

热门文章