未使用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

謝謝你幫了:)

來源

2017-10-13 Axel Kennedal

的onPress裏面，它應該是一個函數。您正在使用箭頭功能，所以，你應該調用函數handlePress：

這一部分：

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

應該是：

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

但如果你只是調用該函數，所以你只要需要通過它像：

<TouchableHighlight onPress={this.handlePress}>

來源

2017-10-13 15:52:47

謝謝:)！我嘗試了兩個選項，只有第一個工作（ this.handlePress（）}>），任何想法爲什麼這可能是？我很確定我也看到了其他語法 –

第二種語法沒有任何問題，您可以檢查文檔，它有一個與上面提到的相同的示例：https：//facebook.github .IO /反應天然/文檔/ touchablehighlight.html –

你。有語法錯誤。

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

應該

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

或

<TouchableHighlight onPress={this.handlePress}>

來源

2017-10-13 15:45:21 bennygenel

未使用React Native調用觸摸處理程序

回答

相關問題