如何在 React native 中调用另一个函数内部的函数

Question

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

我想在另一个函数中调用一个函数，但它显示错误 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.

Answer 1

试试这个：

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

Answer 2

您需要将其绑定到您的 class 函数。

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 并且在 classes 中被设置为 undefined。这就是为什么我们必须手动将 this 绑定到函数。或者使用没有这个问题的箭头函数。

Answer 3

像这样绑定您的函数：

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

    };

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

如何在 React native 中调用另一个函数内部的函数

How to call function inside another function in React native

javascript

ecmascript-6

reactjs

react-native

react-native-android