使用React Native

Question

我刚开始学习React Native并遇到了这个问题：我已经创建了一个组件，里面有TouchableHighlight，我为它分配了一个处理函数，但它似乎没有得到它调用。这是我的组成部分：

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

export default class Component1 extends Component<{}> {
    componentWillMount() {
        console.log("hi there");
        this.setState({age: 22});
    }

    handlePress() {
        this.setState(prevState => ({ age: prevState.age + 1 }));
        console.log("updated age");
    }

    render() {
        return (
            <View>
                <View>
                    <Text>
                        {this.props.name}
                        {"\n"}
                        {this.state.age}
                    </Text>
                </View>
                <View>
                    <TouchableHighlight onPress={() => this.handlePress}>
                        <View>
                            <Text>Become older</Text>
                        </View>
                    </TouchableHighlight>
                </View>
            </View>
        );
    }
}

当我点击“变老”视图时，没有任何内容记录到终端（我正在使用react-native log-android。

感谢您的帮助：）

Answer 1

在onPress内，它应该是一个函数。您正在使用箭头功能，因此您应该调用函数handlePress：

这部分：

<TouchableHighlight onPress={() => this.handlePress}>

应该是：

<TouchableHighlight onPress={() => this.handlePress()}>

但是如果你只是调用函数，那么你只需要传递它：

<TouchableHighlight onPress={this.handlePress}>

Answer 2

您遇到语法错误。

<TouchableHighlight onPress={() => this.handlePress}>

应该是

<TouchableHighlight onPress={() => this.handlePress()}>

或

<TouchableHighlight onPress={this.handlePress}>