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

问题描述：

我刚开始学习React Native并遇到此问题：我创建了一个组件，其中包含TouchableHighlight，并且我为其分配了一个处理函数，但它看起来不像它正在被调用。这里是我的组件：未使用React Native调用触摸处理程序

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

谢谢你帮了:)

答

的onPress里面，它应该是一个函数。您正在使用箭头功能，所以，你应该调用函数handlePress：

这一部分：

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

应该是：

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

但如果你只是调用该函数，所以你只要需要通过它像：

<TouchableHighlight onPress={this.handlePress}>

谢谢:)！我尝试了两个选项，只有第一个工作（ this.handlePress（）}>），任何想法为什么这可能是？我很确定我也看到了其他语法 –

第二种语法没有任何问题，您可以检查文档，它有一个与上面提到的相同的示例：https：//facebook.github .IO /反应天然/文档/ touchablehighlight.html –

答

你。有语法错误。

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

应该

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

或

<TouchableHighlight onPress={this.handlePress}>

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

相关推荐