一共三种方式。详见示意代码。
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传参相关知识点的总结。