React事件绑定详解
目录
- 类组件事件绑定
- 函数组件事件绑定
- 总结
- React事件绑定和原生DOM事件绑定相似
- 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}}
- 注意:React事件采用驼峰命名法
类组件事件绑定
import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { handleClick() { console.log(111); } render() { return (<button onClick={this.handleClick} > 点我</button >) } } ReactDOM.render(<App />, document.getElementById('root'))
函数组件事件绑定
import React from 'react'; import ReactDOM from 'react-dom'; function App() { function handleClick() { console.log(111); } // 函数组件内没有this,所以直接写函数名,不需要加 this. return (<button onClick={handleClick}>点我</button>) } ReactDOM.render(<App />, document.getElementById('root'))
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
相关推荐
-
详解react关于事件绑定this的四种方式
在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件,而且react还会对这种引用进行缓存,以达到cpu和内存的最大化.在使用了es6 class或者纯函数时,这种自动绑定就不复存在了,我们需要手动实现this的绑定 React事件绑定类似于DOM事件绑定,区别如下: 1.React事件的用驼峰法命名,DOM事件事件命名是小写 2.通过jsx,传递一个函数作为event handler,而不是一个字符串. 3.React事件不能通过返回false来阻止默认事件,
-
React学习之事件绑定的几种方法对比
前言 本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined. 通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构造函数中使用bind绑定this class Button extends React.Component { constructor(props) { su
-
React中事件绑定this指向三种方法的实现
1.箭头函数 1.利用箭头函数自身不绑定this的特点; 2.render()方法中的this为组件实例,可以获取到setState(); class App extends React.Component{ state ={ count: 0 } // 事件处理程序 onIncrement() { console.log('事件处理函数中的this:',this) this.setState({ count:this.state.count+1 }) } // 渲染 render() { re
-
React事件绑定的方式详解
一.是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends React.Component { showAlert() { console.log("Hi"); } render() { return <button onClick={this.showAlert}>show</button>; } } 从上面可以看到,事件绑定的方法需要使用{}
-
React事件绑定详解
目录 类组件事件绑定 函数组件事件绑定 总结 React事件绑定和原生DOM事件绑定相似 语法:on+事件名={事件处理程序} 例如:onClick={()=>{}} 注意:React事件采用驼峰命名法 类组件事件绑定 import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { handleClick() { console.log(111); } render(
-
Node.js中使用事件发射器模式实现事件绑定详解
在Node里,很多对象都会发射事件.比如,一个TCP服务器,每当有客户端请求连接就会发射"connect"事件,又比如,每当读取一整块数据,文件系统就会发射一个"data"事件.这些对象在Node里被称为事件发射器(event emitter).事件发射器允许程序员订阅他们感兴趣的事件,并将回调函数绑定到相关的事件上,这样每当事件发射器发射事件时回调函数就会被调用.发布/订阅模式非常类似传统的GUI模式,比如按钮被点击时程序就会收到相应的通知.使用这种模式,服务端程
-
React事件处理和表单的绑定详解
目录 一.事件处理 1.1 React事件 1.2 事件对象 1.3 事件传参 1.4 函数组件事件处理 二.表单 一.事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素类似.但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写. 例如onclick属性应该写成onClick. 如果采用 JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法).例如已经定义了一个名为handleClick的函数,应该这样调用:
-
微信小程序之绑定点击事件实例详解
微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo
-
Jquery基础之事件操作详解
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同. wind
-
Node.js 事件循环详解及实例
Node.js 事件循环详解及实例 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现. Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. Node.js 有多个内置的事件,我们可以
-
C#事件实例详解
C#事件实例详解 C#和JAVA有许多相似的地方,设计思想差不多,语法及其相像,均传承自面向对象设计思想,灵感来自C++并取其精华去其"糟粕(二字持保留意见)",中间语言.解释执行.一次编译.到处执行,出身豪门算得上是表兄弟关系,各自拥有庞大的拥趸,两种语言在发展的道路上你追我赶相互借鉴相互学习相互渗透,至于谁的IDE更强大对于一个用了二十年vim编辑器的人来说实在无从评判,强大到让人内牛满面~ C#语言中关于事件(event)结合代理(delegate)实现对象状态变更时的通知机制,
-
移动web开发之touch事件实例详解
前面的话 iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件.因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互性网页时,常规的鼠标和键盘事件根本不够用.随着Android 中的WebKit的加入,很多这样的专有事件变成了事实标准,导致W3C开始制定Touch Events规范.本文将详细介绍移动端touch事件 概述 包含iOS 2.0软件的iPhone 3G发布时,也包含了一个新版本的Safari浏览器.这款新的移动Safari提供了一些与触摸(touc
-
JavaScript事件概念详解(区分静态注册和动态注册)
js中的事件 什么是事件?事件是电脑输入设备与页面进行交互的响应,我们称之为事件 事件类型 鼠标单击:例如单击button.选中checkbox和radio等元素:鼠标进入.悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table的范围: 键盘按键:当按下按键或释放按键时: HTML事件:例如页面body被加载时:在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容: 突变事件:主要指文档底层元素发生改变时触发的事件,如DomSubtreeModified(DO
随机推荐
- WPF图片按钮的实现方法
- Tomcat内存溢出分析及解决方法
- apache time_wait连接数太多问题解决方法
- 教你三招让电脑“自废武功”的不错设置方法
- 设计模式之模版方法模式_动力节点Java学院整理
- 从HelloWorld和文档注释开始入门Java编程
- canvas知识总结
- GridView自定义删除操作的具体方法
- ASP.NET MVC SSO单点登录设计与实现代码
- PHP中的MYSQL常用函数(php下操作数据库必备)
- 用php的ob_start来生成静态页面的方法分析
- PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
- Laravel学习教程之路由模块
- JS Map 和 List 的简单实现代码
- python中zip和unzip数据的方法
- C# 泛型参数转换
- C语言菜鸟基础教程之加法
- Android仿微信发送语音消息的功能及示例代码
- MySQL5.7 JSON类型使用详解
- python中使用enumerate函数遍历元素实例