React 事件处理

React中的事件处理

　　React 中文官网中有提到："你必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的" 。 "这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分"  。因此，如果忘记绑定，对应函数的 this 的值会是 undefined。当然，在没有用到函数的 this 的时候，绑定就不是必要的了。下面主要是从两个部分对 React 中的事件处理进行理解：第一部分是事件函数仅在在当前组件中进行事件处理，第二部分是将事件函数传递给其他组件进行事件处理。每部分分为用到 this 的事件函数，和没有用到 this 的事件函数。第一部分中例子使用没有传递参数，第二部分中使用参数。最后例中也同样展示了函数的几种绑定方式。

对 react 中的事件处理关注的重点可以总结为两点： ①  this 是否为当前上下文 ② 传递给事件处理程序的参数是从哪里来的

一、事件处理：事件函数仅在在当前组件中（例中没有传递参数，传递参数的情况与之类似）

1、没有用到事件处理程序中的 this 时

代码如下：

var React = require('react');
var ReactDOM = require('react-dom');
class Index extends React.Component {
    constructor() {
        super(); //调用基类的所有的初始化方法
         7     };

    showName(){
        alert('username: "Guang"');
    }

    render() {
        return (
            <div>
                        {/* 传递数据： 不传递参数或者有传递参数但是不涉及事件处理程序中的 this ，对事件处理程序的绑定：不是必须的 */}
                        <input type="button" value="显示名称 没有绑定" onClick={this.showName}></input><br></br>
                        <input type="button" value="显示名称 箭头函数绑定" onClick={()=>this.showName()}></input><br></br>
                        <input type="button" value="显示名称 bind绑定" onClick={this.showName.bind(this)}></input>                        
                        {/* 也可以在构造函数中通过： this.showName=this.showName.bind(this); 语句来绑定 */}                
            </div>
        );
    }
}
ReactDOM.render(
    <Index/>, document.getElementById('example'));

运行结果：

2、用到事件处理程序中的 this 时

代码如下：

var React = require('react');
var ReactDOM = require('react-dom');
class Index extends React.Component {
    constructor() {
        super(); //调用基类的所有的初始化方法
        this.state = {
            username: "Guang",
            age: 20,
            newage1:"9 changeAge1",
            newage2:"99 changeAge2",
            newage3:"999 changeAge3"
        };     
    };

    changeAge1(){
        this.setState({age:this.state.newage1});
    };
    changeAge2(){
        this.setState({age:this.state.newage2});
    };
    changeAge3(){
        this.setState({age:this.state.newage3});
    };

    render() {
        return (
            <div>
                <p>age:{this.state.age}</p>
                {/* 传递数据： 不传递参数但是涉及到事件处理程序中的 this ，对事件处理程序的绑定：是必须的 */}
                <input type="button" value="更改 age, 没有绑定" onClick={this.changeAge1}></input><br></br>
                <input type="button" value="更改 age, 箭头函数绑定" onClick={()=>this.changeAge2()}></input><br></br>
                <input type="button" value="更改 age, bind绑定" onClick={this.changeAge3.bind(this)}></input>                        
                {/* 也可以在构造函数中通过： this.changeAge3=this.changeAge3.bind(this); 语句来绑定 */}                
            </div>
        );
    }
}
ReactDOM.render(
    <Index/>, document.getElementById('example'));

运行结果： 可以看到，在需要用到事件处理程序中的 this 时，如果没有对事件处理程序进行绑定，会报错。而对事件处理程序进行绑定后正确运行

　　

二、事件处理：事件函数传递到其他组件中（例中有传递参数，没有传递参数的情况与之类似）

1、没有用到事件处理程序中的 this 时（当传递的参数只有事件对象无其他数据时）

父组件代码如下：

var React = require('react');
var ReactDOM = require('react-dom');
import BodyChild from './components/bodychild';
class Index extends React.Component {

    // 该函数将获取的事件保持在 this.state.eventobject 中
    parentEventHandler(e){
        alert(e.target.value);
    }

    render() {
        return (
            <div>                    
                    {/* 事件处理：事件函数传递给其他组件 */}
                    {/* 传递的数据： 传递参数 只有事件对象 无其他数据 但是没有用到事件处理程序的 this */}
                    <BodyChild 
                        // 匿名函数赋值给子组件的 this.props.childAnonymous ，匿名函数后面的 bind(this) 是传入当前上下文，使得匿名函数内的 this 为当前上下文
                        childAnonymous={function(e){this.parentEventHandler(e)}.bind(this)}
                        // 箭头函数将函数 this 设置为当前上下文
                        childArrow={(e)=>this.parentEventHandler(e)}
                        // 使用 bind 将函数 this 设置为当前上下文
                        childBind={this.parentEventHandler.bind(this)}
                        // 也可以在构造函数中通过： this.childBind=this.parentEventHandler.bind(this) 语句来绑定                        
                    />    
            </div>
        );
    }
}
ReactDOM.render(
    <Index/>, document.getElementById('example'));

子组件代码如下：

import React from 'react';
export default class BodyChild extends React.Component{

  render(){
    return(
      <div>                         
            {/* 匿名函数后面的 bind(this) 是传入当前上下文，使得匿名函数内的 this 为当前上下文 */}
            <input type="button" value="childAnonymous 匿名函数传参 无绑定" onClick={function(e){this.props.childAnonymous(e)}}></input><br></br>
            <input type="button" value="childAnonymous 匿名函数传参 匿名函数使用 bind 绑定" onClick={function(e){this.props.childAnonymous(e)}.bind(this)}></input><br></br>
            
            {/* 
                对于箭头函数绑定过程的个人理解
                使用箭头函数 this 被设置为当前箭头函数所在的上下文，其原理有点类似于下面的过程(并不是说过程就是这样的,只是原理与之类似,个人理解)                
                源代码：                  
                <input type="button" onClick={(parameters)=>FunctionName(parameters)}/></input>
                过程原理：
                function anonymous(parameters){
                  // 通过某种方式，将函数绑定当前上下文，将 this 设置为当前上下文(比如: FunctionName.bind(当前上下文))
                  // 通过某种方式，将参数 parameters 传递给 FunctionName(比如:FunctionName(parameters))
                }
                <input type="button" onClick=anonymous /></input>                            
            */}           
            <input type="button" value="childArrow 箭头函数传参 箭头函数绑定" onClick={(e)=>this.props.childArrow(e)}></input><br></br>            
          
            {/* 通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。 */}
            <input type="button" value="childBind 直接传参 bind 绑定" onClick={this.props.childBind.bind(this)}></input>
        </div>
    )
  }
}

运行结果：可以看到，在没有用到事件处理程序的 this 时，无论是父组件还是子组件中，若没有绑定事件处理程序会报错，这是由于函数从父组件传递到子组件后，子组件需要调用传递过来的函数（子组件要调用传递过来的函数就要用到 this ,因此匿名函数需要绑定当前上下文。又由于需要传递一个事件参数，无论是通过使用箭头函数还是使用 bind ，都会完成对事件处理程序的绑定），因此几种情况都要绑定，前者是绑定匿名函数，后两者是对事件处理程序进行绑定。

 

2、用到事件处理程序的 this 时

由于不需要用到事件处理程序的 this 时都需要绑定事件处理程序，因此要用到事件处理程序的 this 的情况下必然要绑定事件处理程序，用法与上面相同。

3、给事件处理程序传递多个参数，参数没有事件对象，只有其他参数时

父组件代码如下：

var React = require('react');
var ReactDOM = require('react-dom');
import BodyChild from './components/bodychild';
class Index extends React.Component {

    constructor(){
        super();
        this.state={
            p1:"等待第一个数据",
            p2:"等待第二个数据"
        }
    }
        
    parentAnonymous(param1,param2){
        this.setState({
            p1:param1,
            p2:param2
        }) 
    }

    parentArrow(param1,param2){
        this.setState({
            p1:param1,
            p2:param2
        }) 
    }
    
    parentBind(param1,param2){
        this.setState({
            p1:param1,
            p2:param2
        }) 
    }

    render() {
        return (
            <div>    
                    <p>从子组件中获取到的数据：<b>参数一：</b>{this.state.p1} ，<b>参数二：</b> {this.state.p2}</p>               
                    <BodyChild 
                        // 使用匿名函数的方式 匿名函数后面的 bind(this) 是传入当前上下文，使得匿名函数内的 this 为当前上下文
                        childAnonymous={function(param1,param2){this.parentBind(param1,param2)}.bind(this)}
                        // 箭头函数将函数 this 设置为当前上下文
                        childArrow={(param1,param2)=>this.parentArrow(param1,param2)}
                        // 使用 bind 将函数 this 设置为当前上下文
                        childBind={this.parentBind.bind(this)}                    
                    />    
            </div>
        );
    }
}
ReactDOM.render(
    <Index/>, document.getElementById('example'));

子组件代码如下：

import React from 'react';
export default class BodyChild extends React.Component{

  constructor(props){
    super(props);
    this.state={
      name:"anonymous",
      age:20,
      nameforarrow:"arrow",
      ageforarrow:"99+",
      nameforbind:"bind",
      ageforbind:"81192/81194",
    }
  }

  render(){
    return(
      <div>      
            {/* 使用匿名函数的方式 匿名函数后面的 bind(this) 是传入当前上下文，使得匿名函数内的 this 为当前上下文*/}
            <input type="button" value="匿名函数 bind 绑定" onClick={function(){this.props.childAnonymous(this.state.name,this.state.age)}.bind(this)}></input>                                 
            {/* 通过箭头函数的方式 */}
            <input type="button" value="箭头函数传参 箭头函数绑定" onClick={()=>this.props.childArrow(this.state.nameforarrow,this.state.ageforarrow)}></input>                
            {/* 通过 bind 的方式，虽然本例中不需要传递事件对象，但是事件对象以及更多的参数将会被隐式的进行传递 */}
            <input type="button" value="直接传参 bind 绑定" onClick={this.props.childBind.bind(this,this.state.nameforbind,this.state.ageforbind)}></input>            
        </div>
    )
  }
}

          

运行结果：

4、给事件处理程序传递的多个参数既有事件对象又有其他参数时

父组件代码如下：

var React = require('react');
var ReactDOM = require('react-dom');
import BodyChild from './components/bodychild';
class Index extends React.Component {

    constructor(){
        super();
        this.state={
            value:"等待与事件有关的数据",
            p1:"等待第一个数据",
            p2:"等待第二个数据"
        }
    }
    
    // 由于通过箭头函数的方式，事件对象必须显式的进行传递，在子组件中 e 为第一个参数，传参格式如下
    parentEventHandler(e,param1,param2){
        this.setState({
            value:e.target.value,
            p1:param1,
            p2:param2
        }) 
    }

    // 通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面，传参格式如下
    parentEventHandlerForBind(param1,param2,e){
        this.setState({
            value:e.target.value,
            p1:param1,
            p2:param2
        }) 
    }

    render() {
        return (
            <div>    
                    <p>从子组件中获取到的数据：<b>值：</b>{this.state.value} ，<b>参数一：</b>{this.state.p1} ，<b>参数二：</b> {this.state.p2}</p>               
                    <BodyChild 
                        // 箭头函数将函数 this 设置为当前上下文
                        childArrow={(e,param1,param2)=>this.parentEventHandler(e,param1,param2)}
                        // 使用 bind 将函数 this 设置为当前上下文
                        childBind={this.parentEventHandlerForBind.bind(this)}                       
                        // 也可以通过匿名函数绑定后传参 childBind={function(param1,param2,e){this.parentEventHandlerForBind(param1,param2,e)}.bind(this)}                       
                    />    
            </div>
        );
    }
}
ReactDOM.render(
    <Index/>, document.getElementById('example'));

子组件代码如下：

import React from 'react';
export default class BodyChild extends React.Component{

  constructor(props){
    super(props);
    this.state={
      name:"Guang",
      age:20,
      nameforbind:"Guang Zai",
      ageforbind:"99+"
    }
  }

  render(){
    return(
      <div>                                   
            {/* 通过箭头函数的方式，事件对象必须显式的进行传递 */}
            <input type="button" value="箭头函数传参 箭头函数绑定" onClick={(e)=>this.props.childArrow(e,this.state.name,this.state.age)}></input><br></br>            
            
            {/* 通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递 */}
            <input type="button" value="直接传参 bind 绑定" onClick={this.props.childBind.bind(this,this.state.nameforbind,this.state.ageforbind)}></input>
            
        </div>
    )
  }
}

运行结果如下：