代码之家 › 专栏 › 技术社区 › amirhosein

将函数传递给子组件react native

react-native node.js javascript

-2

amirhosein · 技术社区 · 6 年前

我尝试将onChangeText()传递给react native中的子组件,其工作原理是:

onChangText(value){
    console.log(value)
}

render() {

    return (

        <View style={{flex:1}}>
            <Ui  
                onChangeText={this.onChangText()}  
            />
        </View>
    )
}

但当我调用其他函数(在父函数中)时,如下所示:

loger(value){
    console.log(value)
}
onChangText(value){
    this.loger(value)
}

render() {

    return (

        <View style={{flex:1}}>
            <Ui  
                onChangeText={this.onChangText()}
            />
        </View>  
    )
}

2 回复 | 直到 6 年前

Shubham Khatri 6 年前

你需要注意两件事

弗斯特

 <Ui  
      onChangeText={this.onChangText}
 />

第二 ,无论何时需要使用 this 在被调用函数中,应该将函数绑定到正确的上下文。在您的例子中,您需要将它绑定到父类的上下文,因此可以使用arrow函数来实现这个目的

onChangText = (value) => {
    this.loger(value)
}

amirhosein 6 年前

我通过在箭头函数体中传递函数来解决这个问题,如下所示:

loger(value){
    console.log(value)
}
onChangeText(value){
    this.loger(value)
}

render() {

    return (
        <View style={{flex:1}}>
            <Ui 
                onChangeText={(value)=> this.onChangeText(value)}
            />
        </View>

    )
}

推荐文章

user433342 · 流式传输SheetJS-xlsx以在节点中形成数据

4 月前

servvs · 如何从javascript中的另一个类回调读取修改后的类属性?

4 月前

Vanortton · 使用Docker开始应用程序开发还是在开发过程中配置Docker?[关闭]

4 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

4 月前

LifeAsPixels · 试图使用Node.js读取我的本地html文件时,此错误的来源是什么?

5 月前

Josue Abotsidia · 创建NextJS项目时出错

5 月前

Soon Winner · TypeError:superheroes.random在使用“超级英雄”npm包时不是函数[关闭]

5 月前

Null Salad · 如何使用postgresql和nodejs将变量安全地插入数组?

5 月前

Zak · 令牌认证路由的页面刷新重定向到React中的404页面

5 月前

DSATH · 我的lambda在代码完成之前就结束了,我不知道为什么

5 月前