如何在 React Native 中调用另一个函数内部的函数答案

【问题标题】：How to call function inside another function in React native如何在 React Native 中调用另一个函数内部的函数
【发布时间】：2021-11-20 10:26:38
【问题描述】：

如何在另一个函数中调用一个函数？在这里，这两个函数都是 react native 中同一个类的成员。

我想在另一个函数中调用一个函数，但它显示错误，例如 undefined is not a function

我该如何解决这个问题？

我的代码是：

export default class placeOrder extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
     
    };
  }

  
  PayNow(payM){
    console.log(payM);
  }

  CODPayBtn(props)
  {
     let total = props.total;
     let temp = props.temp;
     let charge = props.charge;
     if(total == temp)
     { 
        if(total-charge > 299)
        {
        return(
            <>
            <Button mode="contained" style={{padding:8,backgroundColor:'green',margin:8}} onPress={() => {this.PayNow('COD')}}>
            Cash on Delivery ( ₹{total} )
           </Button>
            
              </>);
          }
          else
          {
              
          }
      }
      else
      {
       
      }

  }


  render(){
  
    return(
      <SafeAreaView>
      <ScrollView>
      <View>
       <this.CODPayBtn total={this.state.total} temp={this.state.temp} charge={this.state.charge}/>
        
      </View>
      </ScrollView>
      </SafeAreaView>
   )
  }
}

CODPayBtn() 函数中有一个按钮，如果单击此按钮，我想调用PayNow() 函数，但它给出了undefined is not a function 的错误。

【问题讨论】：

我认为问题出在“this”关键字上。您是否尝试过只调用 PayNow('COD') 而不是调用 this.PayNow('COD')？
我只使用 PayNow('COD') 它显示错误，例如 PayNow 不存在
我已经有一段时间没有使用旧的基于类的 react 语法了。我很抱歉弄错了。您需要 bind() 函数。 stackoverflow.com/questions/49350217/…
先生，您能举例说明我如何绑定吗？？
我已经为你写好了答案。

标签： javascript reactjs react-native ecmascript-6 react-native-android

【解决方案1】：

您需要将此绑定到您的类函数。

constructor( props ){
    super( props );
    this.PayNow = this.PayNow.bind(this);
    this.CODPayBtn = this.CODPayBtn.bind(this);
  }

或者，更好的是，使用箭头函数不必处理所有这些。

CODPayBtn = (props) => {
     let total = props.total;
     let temp = props.temp;
     let charge = props.charge;
     if(total == temp)
     { 
        if(total-charge > 299)
        {
        return(
            <>
            <Button mode="contained" style={{padding:8,backgroundColor:'green',margin:8}} onPress={() => {this.PayNow('COD')}}>
            Cash on Delivery ( ₹{total} )
           </Button>
            
              </>);
          }
          else
          {
              
          }
      }
      else
      {
       
      }

  }

这是因为 this 在 js 中的工作方式。当一个函数被定义为function (){..} 时，它会失去其隐含的this 并在类中设置为undefined。这就是为什么我们必须手动将 this 绑定到函数。或者使用没有这个问题的箭头函数。

【讨论】：

【解决方案2】：

像这样绑定你的函数：

constructor(props) {
    super(props);
    this.state = {

    };

    this.PayNow = this.PayNow.bind(this);
    this.CODPayBtn = this.CODPayBtn.bind(this);
}

【讨论】：

【解决方案3】：

试试这个：

<View>
      {this.CODPayBtn(props)}      
</View>

【讨论】：

我想在 CODPayBtn() 中调用 PayNow()
试试 es6 语法：PayNow = (payM) =>{ console.log(payM); }