ReactJs绑定this传参

一共三种方式。详见示意代码。

import React from 'react';
							
export default class BindThis extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			msg: '默认的msg'
		}
		// 绑定this并传参的方式2，在构造函数中绑定并传参
		// 注意当为一个函数调用bind改变了this指向后，bind的结果，有一个返回值，就是被改变this指向的函数的引用
		// bind不会修改原函数的this指向
		this.changeMsg2 = this.changeMsg2.bind(this, 'arg1', 'arg2');
	}
	render(){
		return <div>
			<h1>这是绑定传参的几种方式</h1>
			{/* bind的作用为前面的函数修改函数内部的this指向，让那让函数内部的this指向列表中的第一个参数 */}
			{/* bind和call/apply之间的区别 */}
			{/* 后者修改完this会立即调用前面的函数，而bind不会调用 */}
			{/* 注意：bind的第一个参数是用来修改this指向的，第一个参数后面的所有参数，都会当做将来调用前面函数时候的参数传递进去 */}
			{/* 方式一，在事件处理函数中，直接使用bind绑定 */}
			<input type="button" onClick={ this.changeMsg1.bind(this, 'arg1', 'arg2') } value="这是传参的方式一"/>
			<input type="button" onClick={ this.changeMsg2 } value="这是传参的方式二"/>
			{/* 方式三：绑定this并传参 this指向的是实例 */}
			<input type="button" onClick={ ()=>{ this.changeMsg3('arg1', 'arg2') } } value="这是传参的方式三"/>
			<hr/>
			<h3>{ this.state.msg }</h3>
		</div>
	}

	// 这里的方法是一个普通方法，因此触发的时候this是undefined
	// changeMsg1 = () => {
	changeMsg1(arg1, arg2){
		// console.log(this);
		this.setState({
			msg: '绑定this并传参数' + arg1 +arg2
		});
	}
	changeMsg2(arg1, arg2){
		// console.log(this); //undefined 如果不重新赋值，那么会输出undefined
		this.setState({
			msg: '绑定this并传参数' + arg1 +arg2
		});
	}
	changeMsg3(arg1, arg2){
		// console.log(this);
		this.setState({
			msg: '绑定this并传参数' + arg1 +arg2
		});
	}

}		

以上是针对绑定this传参相关知识点的总结。