react事件绑定(学这一篇就够了)

React元素的事件处理和Dom元素的很相似,但是有一点语法上的不同

• React事件的命名采用的是小驼峰式, 例如(onClick),而不是纯小写(onclick)
• 使用JSX语法的时候,需要传入一个函数作为事件处理函数,而不是一个字符串

* 保证是一个函数
* 如果需要使用this关键词，保证this指向

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props)
    this.handlerClickFn=this.handlerClick
  }

  handlerClick(e){
    console.log(1,this);
  }
  render() {
    return (
      <button onClick={this.handlerClickFn}>点击</button>
    );
  }
}

export default App;

         这里使用的 es5 的绑定事件的语法,可以看到打印出来的this是undefined所以可以看出来this指向的问题,这也是十分重要的,这时候我们就想到es5中改变this指向的方法

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props)
    this.handlerClickFn=this.handlerClick.bind(this)
    //这里把函数的this指向改变成(this,也就是App)
  }

  handlerClick(e){
    console.log(1,this);
  }
  render() {
    return (
      <button onClick={this.handlerClickFn}>点击</button>
    );
  }
}

export default App;

        发现此时this已经被打印出来,并且this指向的是App

import React, { Component } from 'react';

class App extends Component {

  handlerClick(e){
    console.log(1,this);
  }
  render() {
    return (
      <button onClick={this.handlerClick.bind(this)}>点击</button>
      //在jsx语法中改变this指向
    );
  }
}

export default App;

        当然我们也可以直接在JSX语法中更改this指向 ,也是成功打印出this

这个时候思考能不能传参,当然可以,但是e(默认参数)要放在自定义参数最后面

import React, { Component } from 'react';

class App extends Component {

  handlerClick(a,b,e){
    console.log("a",a);
    console.log("b",b);
  }
  render() {
    return (
      <button onClick={this.handlerClick.bind(this,'1','2')}>点击</button>
      //在jsx语法中改变this指向
    );
  }
}

export default App;

 

以上就是ES5事件绑定的方法

下面讲解一下ES6时间绑定的方法

        es6中新增了箭头函数

无参绑定

方法一:

import React, { Component } from 'react';

class App extends Component {

  handleClick=(e)=>{
    console.log(1,this);
  }  //箭头函数
  render() {
    return (
   <button onClick={this.handleClick}>
    点击
   </button>
    );
  }
}

export default App;

 

 方法二:

import React, { Component } from 'react';

class App extends Component {

 
  render() {
    return (
   <button onClick={()=>{
    console.log(1,this);
    //直接在jsx语法中使用箭头函数
   }}>
    点击
   </button>
    );
  }
}

export default App;

        方法二就是直接在jsx里面直接写入箭头函数,这样更简洁更方便,this同样可以打印出来

 有参绑定

有参数时，在绑定时依然要使用 bind；

并且参数一定要传，不然仍然存在 this 指向错误问题；

方法一 :

        在无参绑定的基础上修改

import React, { Component } from 'react';

class App extends Component {
  handleClick=(parms)=>{
    console.log(parms);
  }
  render() {
    return (
      <button 
      onClick={this.handleClick.bind(this,"a")}
      >
        点击
      </button>
    );
  }
}

export default App;

方法二:

import React, { Component } from 'react';

class App extends Component {
  handleClick=(parms,e)=>{
    console.log(parms,this);
  }
  render() {
    return (
      <button 
      onClick={()=>{this.handleClick(5)}}
      >
        点击
      </button>
    );
  }
}

export default App;