javascript - 在 React Native 中调用自定义组件的 onPress

Question

如何解决这个问题？我有一个自定义按钮组件，它包含在我的 ModalScreen 中。这一切似乎都有效，但 onPress 功能正在发挥作用。由于某种原因，它似乎失去了范围，因此我无法引用 this ，甚至无法向函数添加参数。我在这里缺少什么？

import React from 'react';
import {
  Text,
  View,
} from 'react-native';

import Styles from 'app/constants/Styles';
import Button from 'app/components/Button';

export default class ModalScreen extends React.Component {

    onBtnPress() {
        console.log('dfsdfsdf'); /// << this gets consoled out just fine
        //this.props.navigation.navigate('Main'); <<<< this won't work
    }

    render() {
        return (
            <View style={Styles.center}>

                <Text>MOdalScreen</Text>
                <Button label='Gå vidare' onPress={ this.onBtnPress }/>

            </View>
        );
    }
}

按钮.js

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


import Styles from 'app/constants/Styles'
import Vars from 'app/constants/Vars'


export default class Button extends Component {

    render() {
        return (
            <TouchableOpacity style={[Styles.round, Styles.primaryBackground]} onPress={this.props.onPress}>
                <Text style={[Styles.label, Styles.textCenter, { margin: Vars.spacing.narrow }]}>
                    {this.props.label}
                </Text>
            </TouchableOpacity>
        )
    }
}

Answer 1

你说得对，它失去了范围。您只需要在将范围传递给 Button 组件之前以某种方式将范围绑定(bind)到句柄函数即可。一种流行的方法是使用方便的箭头函数:

<Button label='Gå vidare' onPress={ () => this.onBtnPress() }/>

或者您可以在构造函数中使用绑定(bind):

export default class ModalScreen extends React.Component {
    constructor(props) {
        super(props);
        this.onBtnPress = this.onBtnPress.bind(this)
    }

    onBtnPress() {
        console.log('dfsdfsdf'); /// << this gets consoled out just fine
        //this.props.navigation.navigate('Main'); <<<< this won't work
    }