React 学习之路 （五）事件处理
事件处理
React元素的事件，和DOM事件处理有着相似之处，但是也有着不同之处。
- React事件绑定属性的命名采用驼峰命名
- 如果使用React你需要使用jsx语法，就需要传入一个函数作为事件处理函数，而不是像HTML中传入一个字符串
// 传统的HTML
<button onclick="activateLasers()">Activate Lasers
</button>// React中
<button onClick={activeClass}>
点击
</button>另外React中不能使用return false来阻止默认行为，你必须明确使用preventDefault.
function ActionClick () {function handleClick(e) {e.preventDefault();console.log('The link was clicked.')}return (<a href="#" onClick={handleClick}><点击我/a>)
}使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器
- 当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"></div><script src="../react/react.js"></script><script src="../react/react-dom.js"></script><script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script><script type="text/babel">class Toggle extends React.Component{constructor(props) {super(props);this.state = {isToggle: false}this.handleClick = this.handleClick.bind(this)}handleClick () {this.setState((prevState) => {return {isToggle: !prevState.isToggle}})/**类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。这就是为什么会报错setState未定义的原因了*/}render() {return (<button onClick={this.handleClick}>{this.state.isToggle ? 'ON' : 'OFF'}</button>)}}ReactDOM.render(<Toggle />,document.getElementById('app'))</script>
</body>
</html>类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
除了bind之外还有两种方法
- 一、属性初始化器语法, ES7的属性初始化语法（ property initializers ）
这个语法在 Create React App 中默认开启。
//代码4
class MyComponent extends React.Component {constructor(props) {super(props);this.state = {number: 0};}handleClick = () => {this.setState({number: ++this.state.number});}render() {return (<div><div>{this.state.number}</div><button onClick={this.handleClick}>Click</button></div>);}
}
这样一来，再也不用手动绑定this了。但是你需要知道，这个特性还处于试验阶段，默认是不支持的。如果你是使用官方脚手架Create React App 创建的应用，那么这个特性是默认支持的。你也可以自行在项目中引入babel的transform-class-properties插件获取这个特性支持。
- 二、回调函数中使用 箭头函数：
//代码5
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"></div><script src="../react/react.js"></script><script src="../react/react-dom.js"></script><script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script><script type="text/babel">class Toggle extends React.Component{constructor(props) {super(props);this.state = {isToggle: false}}handleClick (){this.setState((prevState) => {return {isToggle: !prevState.isToggle}})}render() {return (<button onClick={(e) => this.handleClick(e)}>{this.state.isToggle ? 'ON' : 'OFF'}</button>)}}ReactDOM.render(<Toggle />,document.getElementById('app'))</script>
</body>
</html>
使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常【建议】【在构造函数中绑定或使用属性初始化器语法来避免这类性能问题】。
向事件处理程序传递参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
// 1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"></div><script src="../react/react.js"></script><script src="../react/react-dom.js"></script><script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script><script type="text/babel">class Toggle extends React.Component{constructor(props) {super(props);this.state = {isToggle: false}}handleClick (id, e){console.log(id)this.setState((prevState) => {return {isToggle: !prevState.isToggle}})}render() {return (<button onClick={(e) => this.handleClick(1, e)}>{this.state.isToggle ? 'ON' : 'OFF'}</button>)}}ReactDOM.render(<Toggle />,document.getElementById('app'))</script>
</body>
</html><button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"></div><script src="../react/react.js"></script><script src="../react/react-dom.js"></script><script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script><script type="text/babel">class Toggle extends React.Component{constructor(props) {super(props);this.state = {isToggle: false}}handleClick (id){console.log(id)this.setState((prevState) => {return {isToggle: !prevState.isToggle}})}render() {return (<button onClick={this.handleClick.bind(this, 1)}>{this.state.isToggle ? 'ON' : 'OFF'}</button>)}}ReactDOM.render(<Toggle />,document.getElementById('app'))</script>
</body>
</html>React 学习之路 （五）事件处理相关推荐
- java 设置年轻代堆大小,[JVM学习之路]五堆（一）堆的内存结构参数设置分代思想内存分配...
[JVM学习之路]五堆(一)堆的内存结构参数设置分代思想内存分配 [JVM学习之路]五.堆(一)堆的内存结构.参数设置.分代思想.内存分配策略及TLAB 一.堆的核心概述 堆的特点: 1.一个jvm实 ...
- Android SurfaceFlinger 学习之路(五)----VSync 工作原理
原址 VSync信号的科普我们上一篇已经介绍过了,这篇我们要分析在SurfaceFlinger中的作用.(愈发觉得做笔记对自己记忆模块巩固有很多帮助,整理文章不一定是用来给别人看的,但一定是为加强自己 ...
- react学习之路（一）
<React学习手册(第二版)>学习笔记(一) React运行机制 如何在浏览器中使用react 首先要引入以下两个库:React和ReactDOM 1.React:用于创建视图 2.Re ...
- React学习分享（五）
十三.React生命周期函数 1.初始化阶段 (1)componentWillMount:render之前最后一次修改状态.注意:在react18之后被弃用了,如果想render之前最后一次修改状态只 ...
- Leaflet学习之路五——动态绘制图形(点、线、圆、多边形)
leaflet动态绘制图形 动态绘点 动态绘线 动态绘多边形 动态绘制矩形 2020.3.16更新 更新日志: 2019.1.14:更新了绘制多边形时tmpline没有移除的问题 2019.1.15: ...
- 前端Vue学习之路(五)插件的使用
vant插件使用 这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话 找到package.json文件 添加以下内容 plugins:[['import', ...
- IOS学习之路五（代码实现UITableView）
先展示一下运行结果: 代码实现: 1.先创建一个空项目: 2.创建一个Controller:(TableViewController) 在AppDelegate.h中声明属性: [cpp] view ...
- php学习之路五（表单验证）
<html><head><title>PHP处理表单</title></head><body><h2>请填写个人信息 ...
- Android学习之路五：Dialog和Toast
Dialog是一种长时间驻留的弹窗,只有在你想要它小时时才会消失, Toast是短时间弹窗,它会在显示消息后很快消失. Dialog案例一(只有"OK"): java代码: new ...
最新文章
- 武汉大学提出ARGAN：注意力循环生成对抗模型用于检测、去除图像阴影 | ICCV 2019...
- 如何用 OpenCV、Python 和深度学习实现面部识别？
- python简单编程例子-Python入门 —— 用pycharm写一个简单的小程序3
- python — 列表与元组
- C语言 - strcpy和strncpy的编程实现及总结
- linux 切换root账号_Linux 服务器的安全保障，看看这些
- TCP/IP学习笔记-Qt中的ReuseAddressHint以及SO_REUSEADDR，以为组播常用场景分析
- 使用TextRange获取输入框中光标的位置
- OpenResty入门
- 获取TextView每行的内容 (涉及getLineCount为0，getLineEnd问题)
- HDU4026 Unlock the Cell Phone [状态压缩DP]
- 百度云盘海外版免费不限速，就是国内不能用！
- 台式计算机主板电池型号,台式机主板电池没电会怎么样 主板电池怎么换
- frame切换、多窗口切换
- TOEFL wordlist 9
- 鼠标在用了一段之后偶然发现以给特别慢的速度移动鼠标，会在移动到可点击的选项按钮附近明显的卡住问题。
- 软件测试的目的和意义
- JAVA数据类型的划分
- excel行列突出显示_在Excel中突出显示即将到来的日期
- iCloud如何只清理本地缓存而不删除云端文件