2017-06-08 11 views
0

私は単純なアクティビティを作成しました。そこでは、円形領域の内部を押すとそれに応じてテキストが変更されます。アプリはうまく動作しますが、円形の領域を押すと、「未定義は関数ではありません(this.setState({pressing:true})」を評価しています)」というエラーが表示されます。 また、円形領域内のテキストは最初に設定する必要がありますが、それは空です。 アクティビティhereが表示されます。コードは以下のとおりです。エラー:未定義は関数ではありません - 反応ネイティブ

import React, { Component } from "react"; 
import { 
    StyleSheet, 
    View, 
    AppRegistry, 
    Text, 
    TouchableHighlight 
} from "react-native"; 

class dhrumil extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { pressing: false }; 
    } 
    _inPress() { 
    this.setState({ pressing: true }); 
    } 
    _outPress() { 
    this.setState({ pressing: false }); 
    } 
    render() { 
    return (
     <View style={styles.mainContainer}> 
     <TouchableHighlight 
      onPressIn={this._inPress} 
      onPressOut={this._outPress} 
      style={styles.toucher} 
     > 
      <View style={styles.smallContainer}> 
      <Text style={styles.texter}> 
       {this.state.pressing ? "EEK" : "PUSH ME"} 
      </Text> 
      </View> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 
var styles = StyleSheet.create({ 
    mainContainer: { 
    flex: 1, 
    backgroundColor: "white", 
    justifyContent: "center", 
    margin: 10, 
    alignItems: "center" 
    }, 
    toucher: { 
    borderRadius: 100 
    }, 
    smallContainer: { 
    backgroundColor: "#ff0000", 
    width: 200, 
    height: 200, 
    borderRadius: 100 
    }, 
    texter: { 
    color: "white", 
    fontSize: 10, 
    fontWeight: "bold" 
    } 
}); 

AppRegistry.registerComponent("dhrumil",() => dhrumil); 

どうすればこの問題を解決できますか?

答えて

1

問題はここにある:

<TouchableHighlight onPressIn={this._inPress} 
onPressOut={this._outPress} style={styles.toucher}> 

あなたが現在thisとしてのコンテキストを固定せずにハンドラを設定しています。 したがって、setStateと呼ばれる関数が見つからない場合はthisとなります。 bindを使用してください。

<TouchableHighlight onPressIn={this._inPress.bind(this)} 
    onPressOut={this._outPress.bind(this)} style={styles.toucher}> 

それとも、また、矢印の機能を使用することができます。

<TouchableHighlight onPressIn={() => this._inPress()} 
     onPressOut={() => this._outPress()} style={styles.toucher}> 
+0

ちょっと感謝。それはうまくいった! –

+0

うれしいです:) –

関連する問題