其他分享
首页 > 其他分享> > 四、React事件处理

四、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指向问题

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