你想知道如何在React中的函数进行传参么，读完本文，你将收获传参的三种方式及bind、apply、call的区别等知识。
第一种方法：在函数定义的时候绑定参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| class App extends React.Component {
constructor(props){
super(props);
this.state = {
name : 'huoxiaoye',
addr : 'beijing'
}
}
render(){
{}
let {name, addr} = this.state;
return <div>
<p>{name}--------{addr}</p>
{/* 通过this改变函数this的指向，并传递参数 */}
<button onClick={this.changeMsg.bind(this,'xiaobai','tianjin')}></button>
</div>
}
changeMsg=(name,addr)=>{
this.setState({name,addr})
}
}
|
- 问题：在此处可以使用call和apply吗？？
- bind(),call(),apply()三者都可以改变函运行时this的指向。
- 区别:call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时this的指向，返回一个新的函数。
- call()和apply()的区别是：call(this,argv1,argv2…),apply(this,[argv1.argv2….]),既call()接收的是参数列表，而apply()则接收参数数组
第二种方法: 在constructor中绑定参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| class App extends React.Component {
constructor(props){
super(props);
this.state = {
name : 'huoxiaoye',
addr : 'beijing'
}
this.changeMsg = this.changeMsg.bind(this,'xiaobai','tianjin')
}
render(){
{}
let {name, addr} = this.state;
return <div>
<p>{name}--------{addr}</p>
{/* 通过this改变函数this的指向，并传递参数 */}
<button onClick={this.changeMsg}></button>
</div>
}
changeMsg=(name,addr)=>{
this.setState({name,addr})
}
}
|
第二种方法: 在定义的时候使用匿名函数传参
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| class App extends React.Component {
constructor(props){
super(props);
this.state = {
name : 'huoxiaoye',
addr : 'beijing'
}
this.changeMsg = this.changeMsg.bind(this,'xiaobai','tianjin')
}
render(){
{}
let {name, addr} = this.state;
return <div>
<p>{name}--------{addr}</p>
{/* 通过this改变函数this的指向，并传递参数 */}
<button onClick={() => { this.changeMsg3('xiaobai', 'tianjin') }}></button>
</div>
}
changeMsg=(name,addr)=>{
this.setState({name,addr})
}
}
|
感谢您的阅读
