代码之家  ›  专栏  ›  技术社区  ›  Axel Kennedal

未使用React Native调用触摸处理程序

  •  2
  • Axel Kennedal  · 技术社区  · 7 年前

    我刚开始学习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 .

    感谢您的帮助:)

    2 回复  |  直到 7 年前
        1
  •  2
  •   Duc Filan    7 年前

    内部 onPress handlePress :

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

    应该是:

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

    但是如果你只是调用函数,那么你只需要像这样传入它:

    <TouchableHighlight onPress={this.handlePress}>
    
        2
  •  0
  •   bennygenel    7 年前

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

    应该是

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

    <TouchableHighlight onPress={this.handlePress}>