Question

这可能是一个简单的问题，但我是React-Native的新手，我现在完全陷入困境。

如何从function1调用function2？

这是我尝试过的，但是当按下第一个按钮时，会出现错误信息：

未定义不是一个函数（评估＆＃39; this.function2（）＆＃39;）

import React, { Component } from 'react';
import {
AppRegistry,
View,
Image,
TouchableOpacity,
} from 'react-native';

export default class Example extends Component {

    function1(){
        console.log('function1() called');
        ...
        this.function2();
    };

    function2() {
        console.log('function2() called');
        ...
    };

    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.function1}>
                    <Image source={require('../../../assets/img/button.png')} />
                </TouchableOpacity>

                <TouchableOpacity onPress={this.function2}>
                    <Image source={require('../../../assets/img/button.png')} />
                </TouchableOpacity>
            </View>
        );
    };
}

AppRegistry.registerComponent('Example', () => Example);

Answer 1

如果函数是回调并且将传递给另一个组件，则应该在组件构造函数中绑定它们。

constructor(props) {
  super(props);

  this.function1 = this.function1.bind(this);
  this.function2 = this.function2.bind(this);
}

Answer 2

试试这个，

<TouchableOpacity onPress={() => this.function1()}>
      <Image source={require('../../../assets/img/button.png')} />
</TouchableOpacity>

与函数表达式相比，胖箭头函数具有更短的语法，并且词法绑定此值。箭头函数始终是匿名的，可以有效地将function (arguments) { expression }转换为arguments => expression。如果在箭头后面使用表达式，则返回是隐式的，因此不需要返回。

如何从React-Native中的另一个函数调用函数？

2 个答案: