React中的this指向，如何为事件绑定函数的多种方式

React中的this指向，如何为事件绑定函数的多种方式

在react中，先看下面的一个demo（点击这段字体，切换’凉爽’和;炎热’），好的你可能会这么写

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHot: false
    };
  }
  showInfo(){        //注意这里，以后主要更改的是这个函数,以及下面的onClick方法里面，其他不动
    this.setState({isHot: !this.state.isHot});
  }
  render(){
    const {isHot} = this.state;
    return(
      <div>
        <h2 onClick={this.showInfo}>今天天气很{isHot? '炎热':'凉爽'}</h2>
      </div>
    );
  }
}

好的，我们运行下看看：

很好，报错了，说是找不到setState方法。
直接说原因吧：
render中标签中事件指向函数，函数不是通过类实例调用的，是直接调用，类中的方法默认开启了局部的严格模式，所以事件绑定函数中this为undefined。
啥意思呢，是因为一开始渲染结束后，标签事件绑定了这个方法，可是你触发的时候并不是类实例去触发的，所以this是undefined(严格模式)。

补充：之所以写 onClick={this.showInfo} 而不是 onClick={this.showInfo()} 是因为加了括号之后，会在绑定时就执行，这是因为react使用的是jsx，在这里加了()相当于执行函数。如果你非要加()，那么你可以在函数showInfo中return一个新函数，懂了ba

好的，我们现在要解决这个报错问题，找不到this。那么我们就用bind()方法改变一下this呗，不知道bind作用的可以去查一下。
补充：bind与call,apply注意区别就是bind绑定后不执行，所以用bind。

//其他的代码别动，在构造函数中加上   this.showInfo = this.showInfo.bind(this)
constructor(props) {
    super(props);
    this.state = {
      isHot: false
    };
    this.showInfo = this.showInfo.bind(this); //改了这里
  }

注意：如果每个方法都绑定一下，也太麻烦了，所以我们用箭头函数来解决下
箭头函数的this指向是上下文，方法的上下文是类里面，因此this指向不会出错，所以我们这么写：

	//构造函数中的bind别忘了删除掉,其他代码不改
	showInfo = ()=>{
	  this.setState({isHot: !this.state.isHot});
	}
	
	onClick={this.showInfo}

好的，this指向这块解决了。

拓展：如果我想顺便带个参数咋办？加括号不是立即执行吗？
方法1：

onClick={this.showInfo(参数)}

showInfo = (参数)=>{
	return this.func(参数);        //这样的话实现了，在func函数中去处理逻辑。
}

方法2：（常用）

onClick={() => this.showInfo(参数)}  //相当于在这里return了

showInfo = (参数)=>{
	处理逻辑       
}

动手试一下，就会了，
如果你又想要参数，有想要事件本身的event
就这么写： onClick={(event) => this.showInfo(event，参数)}