步骤

1、在components下新建bindEvent.jsx文件，添加如下代码：

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

2、对应的index.js：

//1、引入react和react-dom。接受的成员名称，必须这么写
import React from 'react' //创建组件、虚拟dom元素、生命周期
import ReactDOM from 'react-dom'//把创建好的组件和虚拟dom放到页面展示
//引入bindevent
import BindEvent from '@/components/bindEvent'
//2、创建虚拟dom元素
//3、使用reactdom把虚拟dom渲染到页面上ReactDOM.render(<div><BindEvent></BindEvent></div>,document.getElementById('app'))

事件绑定机制

在react中有一套自己的事件绑定机制，事件名为驼峰式命名。并包含特定格式：onClick={function}，所以代码修改如下：

import React from 'react'
import { render } from 'react-dom'
export default class BindEvent extends React.Component{constructor(){super()this.state = {}}render(){return <div>BindEvent组件<hr/><button onClick={function(){console.log('点击了按钮')}}>按钮</button></div>}
}

3、function匿名函数和此实例方法的引用，效果一致，修改代码如下：


import React from 'react'
import { render } from 'react-dom'
export default class BindEvent extends React.Component{constructor(){super()this.state = {}}render(){return <div>BindEvent组件<hr/>{/* <button onClick={function(){console.log('点击了按钮')}}>按钮</button> */}<button onClick={this.myclickHandler}>按钮</button></div>}//实例方法//function匿名函数和此实例方法的引用，效果一致myclickHandler(){console.log('点击了按钮')}
}

以上方式可能存在问题，不推荐使用，使用最多的事件绑定形式为以下方式。
onClick只接受function作为处理函数，箭头函数本身就是一个匿名的function函数

import React from 'react'
import { render } from 'react-dom'
export default class BindEvent extends React.Component{constructor(){super()this.state = {}}render(){return <div>BindEvent组件<hr/>{/* <button onClick={function(){console.log('点击了按钮')}}>按钮</button> */}{/* <button onClick={this.myclickHandler}>按钮</button> */}<button onClick={()=>{this.myclickHandler()}}>按钮</button></div>}//实例方法myclickHandler = ()=>{console.log('点击了按钮')}
}

上一篇:WEBPACK+ES6+REACT入门(4/7)-评论列表DEMO以及CSS样式
下一篇:WEBPACK+ES6+REACT入门(6/7)-使用this.setState修改state上的数据

END

WEBPACK+ES6+REACT入门(5/7)-在React中为按钮绑定点击事件相关推荐

react中绑定点击事件_在React中绑定事件处理程序的最佳方法
react中绑定点击事件 by Charlee Li 通过李李在React中绑定事件处理程序的最佳方法 (The best way to bind event handlers in React) ...
React入门（2）--React的虚拟dom和diff算法
一.虚拟dom和真实dom的区别我们在render函数里写的jsx其实就是react.creactElement的语法糖,在插件babel-plugin-transform-react-jsx的作用 ...
React入门（3）-- React的错误边界（Error Boundaries）
熟悉React都知道,在React中一些UI的错误,比如throw new Error(),加载服务器资源报错时,或者一些js的语法错误可能会导致整个项目崩溃掉,满屏的红色报错,非常不友好.为了解决这 ...
React 组件绑定点击事件，并且传参完整Demo
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 1.传数组下标给点击事件Demo: const A = 65 // ASCII character codec ...
【YY笔记】React.入门（尚硅谷React教程笔记）
前言教程链接:尚硅谷React技术全家桶全套完整版:天禹老师讲得挺好,感谢免费分享教程笔记用OneNote记的,不想重写了,但是想保留格式就只能用图片传上来--很烦可能会有一些疏漏和小白的地方, ...
React入门（4）--react提升项目性能的Api(pureComponent、memo、useMemo、useCallback)
先看下面的例子 import React, { Component } from 'react';class Child extends Component {render() {console.lo ...
微信公众平台开发入门--PHP，实现自动回复文本，图文，点击事件
一页代码实现微信基本回复和点击事件功能,部署上去sae或者bae,妥妥的基本免费的服务器不懂代码都基本每个人都可以做自己的微信公众号了 <?php define("TOKEN&quo ...
React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
【Ant Design Pro 四】react 点击事件传参
简单的绑定点击事件传参: 点击事件 function myClick(){console.log('点击')}return (<Button onClick={myClick}>点击< ...
React实现文件上传过程中取消上传
项目中经常有上传文件的需求,有时候因为文件太大,用户没耐心继续等,或者发现上传错了,想取消上传的话,该怎么实现呢? 先看下上传文件的实现,原本的实现就是页面上一个选择文件的按钮,点击后选择文件,然后上 ...

WEBPACK+ES6+REACT入门(5/7)-在React中为按钮绑定点击事件

WEBPACK+ES6+REACT入门5/7-在React中为按钮绑定点击事件

步骤

事件绑定机制

WEBPACK+ES6+REACT入门(5/7)-在React中为按钮绑定点击事件相关推荐

最新文章

热门文章