我试图在一个类中调用一个函数,但与以下语法混淆。
为什么在调用函数时需要使用bind方法?
为什么箭头功能无法执行?
import React, { Component } from 'react'
import { Text, View } from 'react-native'
//arrow function not getting executed!
myFun = data => {
console.warn(data);
}
myFun(data){
console.warn(data);
}
class Hello extends Component {
render() {
return (
<View>
{this.myFun("first")}
{this.myFun.bind(this, "second")}
</View>
);
}
}
export default Hello;
注意:我已从第一种方法中删除了评论!
答案 0 :(得分:1)
在构造函数中绑定函数:
this.handleChange = this.handleChange.bind(this);
bind方法不执行函数/方法,仅返回具有新上下文(此)的函数
答案 1 :(得分:1)
在我们的案例this
中,关键字Hello class
保留了封闭词法上下文的值。正如您在示例this
中看到的那样,这意味着Hello
没有myFun
,但是您正在尝试调用该函数!
因此,您可以将函数放在类中,或者不久后将调用方法更改为myFun("first")
。
最后,如果您需要在函数内使用this
关键字,则必须使用bind(this)
方法。
答案 2 :(得分:1)
应在类内部调用函数,以使其在此上下文中可用。
import React, { Component } from 'react'
import { Text, View } from 'react-native'
class Hello extends Component {
constructor(props) {
super(props);
}
//both normal fun and arrow fun should be inside class to get it executed!
myFun1 = data => {
console.warn(data);
}
myFun2(data){
console.warn(data);
}
render() {
return (
<View>
{this.myFun("first")}
{this.myFun2.bind(this, "second")}
</View>
);
}
}
export default Hello;
当您使用this.myfun2.bind(this)时,您会将其添加到** this **的当前上下文中。基本上之后,只有您才能执行this.state,this.props,this.setstate等
绑定函数还返回一个有界函数,该有界函数稍后执行时,该函数将具有正确的上下文(“ this”)以调用原始函数。因此,在有用的情况下需要稍后在某些事件中调用该函数时,可以使用bind函数。
答案 3 :(得分:0)
您需要调用以下函数。
import React, { Component } from 'react'
import { Text, View } from 'react-native'
myFun = data => {
console.warn(data);
}
class Hello extends Component {
render() {
return (
<View>
{()=>this.myFun("first")}
</View>
);
}
}
export default Hello;