四、React事件处理

2021-07-11 17:04:22 阅读：141 来源： 互联网

标签：clickHandler 事件处理 console App Component React 事件

一、事件绑定

　　React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同，React元素的事件绑定采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写，如onclick, React里的事件是驼峰，如onClick，React的事件并不是原生事件，而是合成事件

函数组件与类组件绑定事件的区别：

1、函数组件中不需要调用this关键词

2、类组件中绑定事件函数的时候需要使用到this，代表指向当前的类的引用

 1 // 函数组件事件绑定
 2 import React from "react";
 3 
 4 const clickHandler = () => {
 5   console.log("海纳百川有容乃大，壁立千仞无欲则刚。");
 6 };
 7 
 8 const App = () => {
 9   return <button onClick={clickHandler}>老林说</button>;
10 };
11 
12 export default App;

 1 // 类组件事件绑定
 2 import React, { Component } from 'react';
 3 class App extends Component{
 4   render() {
 5     return (
 6       <div>
 7           <!-- 使用JSX 语法时，需要传入一个函数作为事件处理函数-->
 8         <button onClick={this.clickHandler}>老林说</button>
 9       </div>
10     )
11   }
12   clickHandler() {
13     console.log('海纳百川有容乃大，壁立千仞无欲则刚。')
14   }
15 }

二、事件对象

1、React中可以通过，事件处理函数的参数，获取到事件对象

2、它的事件对象叫做：合成事件，即兼容所有浏览器，无需担心跨浏览器兼容问题

3、React中的事件对象并不是浏览器提供的，而是它自己内部所构建的

4、此事件对象拥有和浏览器原生事件相同的接口，包括stopPropagation()和 preventDefault()

5、如果想获取到原生事件对象，可以通过e.nativeEvent属性来进行获取

 1 import React, { Component } from "react";
 2 
 3 class App extends Component {
 4   render() {
 5     return (
 6       <div>
 7         <button onClick={this.clickHandler}>老林说</button>
 8       </div>
 9     );
10   }
11   clickHandler(e) {
12     console.log("海纳百川有容乃大，壁立千仞无欲则刚。");
13     console.log(e);
14     console.log(e.target); // dom对象
15     console.log(e.nativeEvent); // 浏览器原生事件对象
16   }
17 }
18 
19 export default App;

三、事件方法传参

React中对于事件方法传参的方式有着非常灵活的用法。

以传递参数username值为zhangsan为例，常见的有以下几种方式：

通过this.事件方法.bind方式进行传参
- onClick={this.clickHandler.bind('zhangsan')}
  - 参数接收：clickHandler(username)
- onClick={this.clickHandler.bind('zhangsan')}
  - 参数接收：clickHandler(username,event)
箭头函数传参
- onClick={() => this.事件方法('zhangsan')}
  - 参数接收：clickHandler(username)
- onClick={(e) => this.事件方法('zhangsan', e)}
  - 参数接收：clickHandler(username,event)

四、this指向问题

1、JSX事件函数方法中的this，默认不会绑定this指向

2、如果忘记绑定，当调用这个函数的时候this的值为undefined

例如，像下面这段代码回调函数中的this输出为undefined：

 1 import React, { Component } from "react";
 2 
 3 class App extends Component {
 4   render() {
 5     return (
 6       <div>
 7         <button onClick={this.clickHandler}>
 8           老林说
 9         </button>
10       </div>
11     );
12   }
13   clickHandler() {
14     console.log(this);
15   }
16 }
17 
18 export default App;

解决this指向问题的方法

1、通过类组件的构造函数进行绑定

 1 import React, { Component } from "react";
 2 
 3 class App extends Component {
 4   constructor(props) {
 5     super(props)
 6     this.clickHandler = this.clickHandler.bind(this)
 7   }
 8   render() {
 9     return (
10       <div>
11         <button onClick={this.clickHandler}>
12           老林说
13         </button>
14       </div>
15     );
16   }
17   clickHandler() {
18     console.log(this);
19   }
20 }
21 
22 export default App;

2、使用bind绑定

 1 import React, { Component } from "react";
 2 
 3 class App extends Component {
 4   render() {
 5     return (
 6       <div>
 7         <button onClick={this.clickHandler.bind(this)}>
 8           老林说
 9         </button>
10       </div>
11     );
12   }
13   clickHandler() {
14     console.log(this);
15   }
16 }
17 
18 export default App;

3、使用箭头函数：方式一

 1 import React, { Component } from "react";
 2 
 3 class App extends Component {
 4   render() {
 5     return (
 6       <div>
 7         <button onClick={() => this.clickHandler()}>老林说</button>
 8       </div>
 9     );
10   }
11   clickHandler() {
12     console.log(this);
13   }
14 }

4、使用箭头函数：方式二

 1 import React, { Component } from "react";
 2 
 3 class App extends Component {
 4   render() {
 5     return (
 6       <div>
 7         <button onClick={this.clickHandler}>老林说</button>
 8       </div>
 9     );
10   }
11   clickHandler = () => {
12     console.log(this);
13   }
14 }
15 
16 export default App;

标签：clickHandler,事件处理,console,App,Component,React,事件
来源： https://www.cnblogs.com/tricker65535/p/14998923.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

四、React事件处理

一、事件绑定

二、事件对象

三、事件方法传参

四、this指向问题