四、React事件处理

一、事件绑定

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

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

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

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

// 函数组件事件绑定
import React from "react";

const clickHandler = () => {
  console.log("海纳百川有容乃大，壁立千仞无欲则刚。");
};

const App = () => {
  return <button onClick={clickHandler}>老林说</button>;
};

export default App;

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

二、事件对象

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

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

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

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

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

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>老林说</button>
      </div>
    );
  }
  clickHandler(e) {
    console.log("海纳百川有容乃大，壁立千仞无欲则刚。");
    console.log(e);
    console.log(e.target); // dom对象
    console.log(e.nativeEvent); // 浏览器原生事件对象
  }
}

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：

 

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>
          老林说
        </button>
      </div>
    );
  }
  clickHandler() {
    console.log(this);
  }
}

export default App;

解决this指向问题的方法

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

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props)
    this.clickHandler = this.clickHandler.bind(this)
  }
  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>
          老林说
        </button>
      </div>
    );
  }
  clickHandler() {
    console.log(this);
  }
}

export default App;

2、使用bind绑定

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <button onClick={this.clickHandler.bind(this)}>
          老林说
        </button>
      </div>
    );
  }
  clickHandler() {
    console.log(this);
  }
}

export default App;

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

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <button onClick={() => this.clickHandler()}>老林说</button>
      </div>
    );
  }
  clickHandler() {
    console.log(this);
  }
}

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

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>老林说</button>
      </div>
    );
  }
  clickHandler = () => {
    console.log(this);
  }
}

export default App;