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

Question

这可能是一个简单的问题，但我对React-Native还很陌生，目前完全卡住了。

我如何从function1调用function2？

这是我尝试过的方法，但当按下第一个按钮时，它会呈现出一个错误，说：

未定义的函数（在“this.function2()”中评估）

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);

- MisseMask

---

直接调用function2()怎么样？ - user10089632

因为有时您可能想要在function1()中执行代码，但有时只想在function2()中执行。这可以减少冗余。请参见帖子中的编辑代码。 - MisseMask

Answer 1

如果该函数是回调函数，需要传递到另一个组件中，则应在组件构造函数中绑定它们。

constructor(props) {
  super(props);

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

- Harlan

Answer 2

尝试一下：

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

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

- Pratik S. Gode

---

我明白了！我以为它与作用域和绑定有关。谢谢你的帮助。 - MisseMask