事件绑定

在一个事件发生时调用特定的处理逻辑，将逻辑与事件绑定起来

绑定方式有三种：

构造绑定
就近绑定
自动绑定

构造绑定

这种方式使用时在构造函数中对组件内部的方法进行绑定

class Toggle extends React.Component {constructor(props) {super(props);this.state = {isToggleOn: true};// 这边绑定是必要的，这样 `this` 才能在回调函数中使用this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState(prevState => ({isToggleOn: !prevState.isToggleOn}));}render() {return (<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}
}

注意：prevState表示react组件的前一个状态，只有在this.setState中才存在该变量

state与prevState区别：
在同一个函数即作用域中：this.state的值始终保持不变，即进入该函数前就已经确定了，当在函数中对state进行改变时，改变的值被放入prevState中保存，state值在离开该作用域时才会更新（prevState->state）
最明显的区别就是在同一个作用域中多次更新state：
  this.setState(prevState => {console.log('prevState',prevState,'state',this.state)return({a: this.state.a+1 })});this.setState(prevState => {console.log('prevState',prevState,'state',this.state)return({a: this.state.a+1})});
第一次输出：prevState,0,state,0
第二次输出：prevState,1,state,0

类方法默认不会绑定this（不包括箭头函数），如果需要在方法内部使用this，则必须手动bind绑定。推荐使用箭头函数自动绑定。bind用法

注意：在事件中：如果函数要传值，不能直接写括号传参数，会导致立即执行，如果需要传参，可以采用匿名箭头函数包装一层：<button onClick={()=>{this.handleClick(this.state.a)}}>

注意：不仅可以在button中绑定onClick事件还可以在其他的，比如
<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>

就近绑定

 render() {return (<button onClick={this.handleClick.bind(this)}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);

自动绑定

 handleClick = () => {this.setState(prevState => ({isToggleOn: !prevState.isToggleOn}));}render() {return (<button onClick={this.handleClick}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>);}

事件传参

传参方式有两种：箭头函数传递和bind传递

箭头函数传递

示例：<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
这个没啥讲的

bind传参

示例：<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
参考代码：

class Popper extends React.Component{constructor(){super();this.state = {name:'Hello world!'};}preventPop(name, e){    //事件对象e要放在最后e.preventDefault();alert(name);}render(){return (<div><p>hello</p>/* 通过 bind() 方法传递参数。 */<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a></div>);}
}

注意：bind方式向监听函数传参，监听函数定义在组件中，函数入参列表中：e必须放在传参的后面！！

小鸡啄米之React事件处理相关推荐

小鸡啄米之React组件内部的API
React组件内部的API 组件API setState replaceState setProps replaceProps forceUpdate findDOMNode isMounted 组件 ...
鸡啄米之VS2010/MFC编程入门之二十四（常用控件：列表框控件ListBox）
目录一.目的: 1.点击列表框某个变量后,编辑框就显示出来这个变量名字一.参考: 1.VS2010/MFC编程入门之二十四(常用控件:列表框控件ListBox) ①总结:good:亲测有效,适合多 ...
鸡啄米vc++2010系列32（标签控件Tab Control 下）
上一节中鸡啄米讲了标签控件知识的上半部分,本节继续讲下半部分. 标签控件的创建 MFC为标签控件的操作提供了CTabCtrl类. 与之前的控件类似,创建标签控件可以在对话框模板中直接拖入Tab Con ...
智能车竞赛技术报告 | 智能视觉组 - 大连海事大学 - 菜鸡啄米
简介: 本文以十六届恩智浦杯全国大学生智能车竞赛为背景,设计的智能车系统以恩智浦i.MX RT1064微处理器为核心控制单元.通过四个电感检测赛道信息,计算出赛道轨迹.通过1024线带方向的编码器获 ...
React事件处理函数传参问题
React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的. 转载于:https://www.cnblogs.com/zhansu/p/848232 ...
鸡啄米vc++2010系列11（非模态对话框的创建）
上一节鸡啄米讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 鸡啄米已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.鸡啄米会将 ...
鸡啄米vc++2010系列40（文档、视图和框架：分割窗口）
分割窗口概述分割窗口,顾名思义,就是将一个窗口分割成多个窗格,在每个窗格中都包含有视图,或者是同一类型的视图,或者是不同类型的视图. MFC分割窗口的方式有两种,动态分割和静态分割. 动态分割窗口通 ...
鸡啄米vc++2010系列35（工具栏资源及CToolBar类）
工具栏简介工具栏一般位于主框架窗口的上部,菜单栏的下方,由一些带图片的按钮组成.当用户用鼠标单击工具栏上某个按钮时,程序会执行相应的操作,如果鼠标没有点击,只是停留在某个按钮上一会后,会弹出一个小窗 ...
鸡啄米MFC教程笔记之七：对话框：为控件添加消息处理函数
MFC为对话框和控件等定义了诸多消息,我们对它们操作时会触发消息,这些消息最终由消息处理函数处理.比如我们点击按钮时就会产生BN_CLICKED消息,修改编辑框内容时会产生EN_CHANGE消息等.一 ...
react 事件处理_在React中处理事件
react 事件处理在使用React渲染RESTful服务后,我们创建了简单的UI,用于渲染从RESTful服务获取的员工列表. 作为本文的一部分,我们将扩展同一应用程序以支持添加和删除员工操作. ...

小鸡啄米之React事件处理

React事件处理