事件相关

一 React 中的事件处理

需要理解的概念有：

React事件的原理
React事件的命名规则，驼峰式
需要传入函数作为事件处理函数，不是字符串。并且传入函数不需要加小括号，因为不是调用而是指向
React中的事件不能通过return来阻止默认事件，必须preventDefault阻止
官网了解一下什么是合成事件
事件绑定this指向
- 可以在事件绑定处利用bind
- 可以在构造函数处利用bind
- 可以利用箭头函数定义
- 可以在事件绑定处利用箭头函数onClick={()=>{ this.fn() }} 这时候是有括号的

 <div id="test"></div><script type="text/babel">class Demo extends React.Component {render() {return (<div>{/*在React可以使用如下的事件操作方式，最终都会绑定到ul元素上，因为它底层都是通过事件委托实现*/}{/*<ul><li onClick={this.fn}>体育新闻</li><li onClick={this.fn}>娱乐新闻</li><li onClick={this.fn}>社会新闻</li><li onClick={this.fn}>财经新闻</li></ul>*/}<button>新增li标签</button> //事件委托解决性能问题<input ref="userinput" type="text" />&nbsp;<button onClick={this.showData}>点我提示左侧数据</button>&nbsp;<input onBlur={this.showData2}type="text"placeholder="失去焦点提示数据" /></div>)}showData = () => {alert(this.refs.userinput.value)}showData2 = (event) => {const { target } = eventalert(target.value)}}ReactDOM.render(<Demo />, document.getElementById('test'))</script>

总结：

1 React底层并没有使用原生的DOM事件，ondbclick(原生)—>onDoubleClick(React)（合成事件）

2 React实现了一套非常高效的事件系统，包含：注册事件，存储事件，绑定事件，调用事件

3 React的事件在原生的基础上做了极大的优化，减少内存开销，而且还解决了一个兼容性问题

4 React中的事件都是通过事件委托的方式实现的。

5 React中通过onXxxx去绑定事件（注意大小写）

6 可以通过event.target得到触达事件的DOM元素。

补充：event.target和event.currentTarget的差异

绝大多数情况下，event.target和event.currentTarget得到的是同一个对象内容

event.currentTarget是事件绑定对象

event.target是事件触发对象

应用到事件委托中

二非受控组件

需要理解的概念有：

什么是非受控组件：组件中需要进行DOM的操作，通过获取DOM节点获取输入，而非state，利用是现找DOM对象，主要使用ref

 <div id="test"></div><script type="text/babel">class Login extends React.Component {render() {return (<form onSubmit={this.login}>用户名 <input ref={c => this.username = c} type="text" />密码 <input ref={c => this.password = c} type="password" /><button>登录</button></form>)}login = (e) => {return false //react中不能使用return false阻止默认事件//阻止表单提交后跳转e.preventDefault();//需要用e.preventDefault()阻止默认事件const { username, password } = thisconsole.log(`用户名是：${username.value}，密码是${password.value}`)}}ReactDOM.render(<Login />, document.getElementById('test'))</script>

三受控组件

需要理解的概念有：

组件想要进行render，props的改变，state的修改

什么是受控组件：通过state进行控制操作，获取数据，而不是节点
利用受控组件收集表单数据
state数据初始化的重要性

1.利用受控组件收集表单数据

 <div id="test"></div><script type="text/babel">//定义组件class Login extends React.Component {// 状态中的数据在使用前最好进行初始化state = {username: '',password: '',}render() {return (<div><form onSubmit={this.login}>//1 想要获取input内容，需要进行事件的绑定用户名  <input onChange={this.saveUserName}type="text" />密码<input onChange={this.savePassword}type="password" /><button>登录</button></form></div>)}//用户名发生改变的回调saveUserName = (e) => {//2 在修改input以后可以获取input的值console.log(e.target.value)// 3 修改state里的数据内容this.setState({ username: e.target.value }) //将用户名存入state}//密码发生改变的回调savePassword = (e) => {this.setState({ password: e.target.value }) //将密码存入state}//登录按钮的回调login = (e) => {e.preventDefault(); //阻止表单提交后跳转//4 获取表单数据const { username, password } = this.stateconsole.log(`用户名是${username}，密码是${password}`)}}ReactDOM.render(<Login />, document.getElementById('test'))</script>

2.state数据初始化的重要性

 <div id="test"></div><script type="text/babel">//定义组件class Login extends React.Component {// 状态中的数据在使用前最好进行初始化// 不设置state，有时是会有代码影响的，比如数组遍历state = {username: '',password: '',subjects: [], // object:{}对象是永恒的，所以不要用对象进行条件判断。如果要用，只能用对象的属性进行判断// 不光要设，还要正确数据类型// 如果不设或者字符串等类型就出错}render() {return (<div><form onSubmit={this.login}>用户名<input onChange={this.saveUserName}type="text" />密码<input onChange={this.savePassword}type="password" /><button>登录</button></form><button onClick={this.createSubjects}>创建课程</button><ul>{this.state.subjects.map((item, index) => {return <li key={index}>{item}</li>})}</ul></div>)}createSubjects = () => {this.setState({ subjects: ['前端', '大数据', 'java'] })}//用户名发生改变的回调saveUserName = (e) => {this.setState({ username: e.target.value }) //将用户名存入state}//密码发生改变的回调savePassword = (e) => {this.setState({ password: e.target.value }) //将密码存入state}//登录按钮的回调login = (e) => {e.preventDefault(); //阻止表单提交后跳转const { username, password } = this.stateconsole.log(`用户名是${username}，密码是${password}`)}}//渲染组件ReactDOM.render(<Login />, document.getElementById('test'))</script>

四高阶函数与函数柯里化

需要理解的概念有：

表单字段如果很多，如何使用受控组件进行表单数据收集
什么是高阶函数：

如果有一个函数A，A符合下面2个规则中的任何一个，那么A函数就是高阶函数
1.若A函数接收的参数是一个函数，那么A就可以称之为高阶函数；
2.若A函数调用的返回值依然是一个函数，那么A就可以称之为高阶函数；
常见的高阶函数：数组相关的方法、bind、Promise、setTimeout、map,forEach,filter等等
函数的柯里化是什么

通过函数调用继续返回函数的方式，实现多次接收参数，最后统一处理的编码形式

柯里化举例：
```
function sum(a){return (b)=>{return (c)=>{return a+b+c}}
}
const result = sum(1)(2)(3) //6
```

 <div id="test"></div><script type="text/babel">class Login extends React.Component {// 状态中的数据在使用前最好进行初始化state = {username: '',password: '',  //state.password --->state[str//]}render() {return (<form onSubmit={this.login}>//如果事件绑定的时候传递参数，那么绑定的回调函数的参数从event就变成了用户自定义参数用户名 <inputonChange={this.saveFormData('username')}type="text" />    <br /><br />密码 <inputonChange={this.saveFormData('password')}type="password" /> <br /><br /><button>登录</button></form>)}// saveFormData是程序员自己调用的，其实是个指向// saveFormData返回的那个函数是交给react进行事件绑定回调的函数saveFormData = (str) => {//进行input操作，不知道操作的是username还是password，首先确定输入框操作是什么//str是用户自定义参数console.log(str) //获取的是参数username和passwordreturn (e) => { //为了解决this的问题，不能写普通函数console.log(str, e.target.value)//input输入内容//动态赋值 动态取值this.setState({ [str]: e.target.value })/*一共想要的内容有三个：1 唯一标识 str2 输入的内容 e.target.value3 this对象*/}}//登录按钮的回调login = (e) => {e.preventDefault(); //阻止表单提交后跳转const { username, password } = this.stateconsole.log(`用户名是${username}，密码是${password}`)}}//渲染组件ReactDOM.render(<Login />, document.getElementById('test'))</script>

五不用柯里化的写法

需要理解的概念有：

事件绑定回调事件并传递事件参数

 <div id="test"></div><script type="text/babel">// 定义组件class Login extends React.Component {// 状态中的数据在使用前最好进行初始化state = {username: '',password: '',}render() {return (<form onSubmit={this.login}>{/*onChange已经有了一个回调函数，并且传递了event事件对象可以在自定义函数中同时传递名称与事件目标的值1 e是一个函数2 有一个箭头函数，它能够返回一个函数*/}用户名 <inputonChange={(event) =>this.saveFormData('username', event.target.value)}type="text" />   <br /><br />密码 <inputonChange={(event) =>this.saveFormData('password', event.target.value)}type="password" />   <br /><br /><button>登录</button></form>)}saveFormData = (str, value) => {//三个内容不变：唯一值，输入内容，thisthis.setState({ [str]: value })}//登录按钮的回调login = (e) => {e.preventDefault(); //阻止表单提交后跳转const { username, password } = this.stateconsole.log(`用户名是${username}，密码是${password}`)}}//渲染组件ReactDOM.render(<Login />, document.getElementById('test'))</script>

六类式组件中构造器的说明

需要理解的概念有：

类式组件中的构造器主要的任务

关于类式组件中的构造器：
1.一般在开发中我们从来不写构造器，因为constructor的两个主要工作都已经进行优化处理：
(1).通过给 this.state 赋值对象来初始化内部 state
(2).解决事件处理函数中this的问题
均可以通过如下两个方式搞定：
(1).state = {}简写完成初始化state
(2).changeWeather = ()=>{} 箭头函数解决this指向问题

2.如果写了构造器，那么构造器中必调用super，调用super时传不传入props呢？
(1).如果传递，在super语句之后，可以通过this.props.xxx正常获取props
(2).如果不传递，在构造器中this.props.xxx是undefined。（此场景几乎开发中不出现）
super的使用与不使用的差异
props的接收操作模式

 <div id="test"></div><script type="text/babel">class Weather extends React.Component {//开始的主要作用：1 初始化state    2 进行bind的this指向改变constructor(props) {// console.log('constructor',props)super(props)//如果不使用super进行props的继承，那么将无法通过this.props进行属性的获取console.log('%%%', this.props)this.state = { isHot: true }}render() {return (<div><h2>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h2><h4>我收到了一个人的信息：{this.props.name}--{this.props.age}</h4><button onClick={this.changeWeather}>切换天气</button></div>)}changeWeather = () => {//获取原来的isHot值const { isHot } = this.state//更新状态this.setState({ isHot: !isHot })}}ReactDOM.render(<Weather name="老刘" age={18} />,document.getElementById('test'))</script>

react-事件相关相关推荐

React事件机制 - 源码概览（下）
上篇文档 React事件机制 - 源码概览(上)说到了事件执行阶段的构造合成事件部分,本文接着继续往下分析批处理合成事件入口是 runEventsInBatch // runEventsInBat ...
React事件系统研究总结
React作为目前前端业界最流行的mvvm框架之一已经被广大前端同学所熟知,而在日常工作中已经熟悉使用React的我们对React内部的工作流程.设计理念是否又有足够的了解呢?本文是对于React事件 ...
彻底搞懂原生事件流和 React 事件流
事件系统,业务开发中只要需要与用户进行交互,那么事件是必不可少的,dom 中存在很多事件,比如 click,scroll,focus 等等.我们将深入事件系统中,以及事件中常用的一些操作比如 prev ...
React 事件 4
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 将参数传递给事件处理程序在循环内部,通常需要将额外的参数传递给事件处理程序.例如,如果id是行ID,则以下任 ...
关于事件相关电位SSVEP应用于视频游戏的研究
点击上面"脑机接口社区"关注我们更多技术干货第一时间送达前面介绍过事件相关电位P300应用于视频游戏的研究: 关于事件相关电位P300应用于视频游戏的研究今天主要介绍事件相关 ...
事件相关去同步 (ERD) 和事件相关同步化 (ERS)在脑电信号研究中的应用
作者:周思捷,白红民,广州军区广州总医院神经外科人脑具有电活动是Hans Berger于1924年首先检测到的,并将这种检测方法命名为脑电图(electroencephalo-graph,EEG). ...
html5视频播放事件相关
html5视频播放事件相关使用: 监听视频播放结束 var myVideo = $("#videoPlayExecute"); // 监听视频播放结束 myVideo[0].ad ...
React事件的问题
React 把事件委托到 document 对象上. 当真实 DOM 元素触发事件,先处理原生事件,然后会冒泡到 document 对象后,再处理 React 事件. React事件绑定的时刻是在 r ...
ACL 2022事件相关(事件抽取、事件关系抽取、事件预测等)论文汇总
ACL 2022事件相关(事件抽取.事件关系抽取.事件预测等)论文汇总,已更新全部的论文. Event Extraction Query and Extract: Refining Event Ext ...
抗阿达木单抗的抗体可能与阿达木单抗治疗过程中静脉和动脉血栓事件相关
原文译文 Arthritis & Rheumatism DOI: 10.1002/art.30209 Venous and arterial thromboembolic events in ...

react-事件相关

事件相关

一 React 中的事件处理

总结：

补充：event.target和event.currentTarget的差异

二非受控组件

三受控组件

1.利用受控组件收集表单数据

2.state数据初始化的重要性

四高阶函数与函数柯里化

五不用柯里化的写法

六类式组件中构造器的说明

react-事件相关相关推荐

最新文章

热门文章

react-事件相关

事件相关

一 React 中的事件处理

总结：

补充：event.target和event.currentTarget的差异

二 非受控组件

三 受控组件

1.利用受控组件收集表单数据

2.state数据初始化的重要性

四 高阶函数与函数柯里化

五 不用柯里化的写法

六 类式组件中构造器的说明

react-事件相关相关推荐

最新文章

热门文章

二非受控组件

三受控组件

四高阶函数与函数柯里化

五不用柯里化的写法

六类式组件中构造器的说明