将功能传递给子组件反应本机

Question

我尝试将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>  
    )
} 

我遇到错误：this.loger不是函数

Answer 1

您需要注意的两件事

首先，在将函数传递给child时，您无需调用它，而只需传递引用，例如

 <Ui  
      onChangeText={this.onChangText}
 />

第二，每当需要在被调用函数内使用this关键字时，都应将函数绑定到正确的上下文。在您的情况下，您需要将其绑定到父类的上下文，因此您可以为此使用箭头功能

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

Answer 2

我通过将我的函数传递给箭头函数的主体来修复该问题，如下所示：

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

render() {

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

    )
}