this.stateはでたonPressイベント中に定義されていない私はネイティブ反応する新しいこんにちはネイティブ

Question

を反応させ、私のコードは次のとおりです。

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

 
import Style from './styles/signin'; 
 
import Button from '../common/button'; 
 

 
export default class SignIn extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     email: '', 
 
     password: '' 
 
    }; 
 
    } 
 

 
    render(){ 
 
    return(
 
     <View style={Style.container}> 
 
     <Text style={Style.label}>Email</Text> 
 
     <TextInput 
 
      style={Style.input} 
 
      onChangeText={(text) => this.setState({email: text})} 
 
      value={this.state.email} 
 
     /> 
 
     <Text style={Style.label}>Password</Text> 
 
     <TextInput 
 
      style={Style.input} 
 
      onChangeText={(text) => this.setState({password: text})} 
 
      value={this.state.password} 
 
      secureTextEntry={true} 
 
     /> 
 
     <Button text={'Sign in'} onPress={this.onPress}/> 
 
     </View> 
 
    ); 
 
    } 
 
    onPress(){ 
 
    console.log(this.state.email); 
 
    } 
 
}

私が持っている、このフォームを押す記号を埋めますこのエラーメッセージ： "未定義のプロパティ '電子メール'を読み取ることができません。 ありがとうございました！

Answer 1

これはバインディングの問題です。最も簡単な解決策は、そのようbuttonタグのためにあなたのJSXを変更するには次のようになります。

<Button text={'Sign in'} onPress={this.onPress.bind(this)} /> 

ES6のクラスを使用すると、ES5のreact.createClassとするために使用されている可能性が自動バインディングを失います。 ES6を反応コンポーネントに使用するときは、バインディングを意識する必要があります。

別のオプションはそうのようなあなたのコンストラクタにメソッドをバインドすることです：

constructor(props) { 
    super(props); 
    this.state = { 
     email: '', 
     password: '' 
    }; 

    this.onPress = this.onPress.bind(this) 
    } 

それともあなたも「これは」あなたが作成しているコンポーネントへの結合を維持するために、脂肪の矢印ES6構文機能を利用することができます。

<Button text={'Sign in'} onPress={() => this.onPress()} /> 

UPDATE：ご使用の環境は、私が反応し、ネイティブから構築されたと考えているいくつかのES7の機能を（サポートしている場合

は、再びこれを更新するにはまたはcreate-react-native-app shoudl do）この記法を使用して、thisキーワードを使用するクラスメソッドを自動バインドすることができます。

// This is auto-bound so `this` is what you'd expect 
onPress =() => { 
    console.log(this.state.email); 
}; 

代わりの

// This is not auto-bound so `this.state` will be `undefined` 
onPress(){ 
    console.log(this.state.email); 
} 

最良のオプションは、あなたのコンストラクタで利用可能かをバインドする場合ES7機能を使用することです。 Buttonに無名関数onPress={() => this.onPress()}またはonPress={this.onPress.bind(this)}を直接使用することは、パフォーマンス上の理由からあまり好ましくありません。