関数から状態を取得するにはどうすればいいですか？

Question

関数からクラスの状態を取得するにはどうすればよいですか？ alertboxで

import React, { Component } from 'react'; 
import { 
Platform, 
StyleSheet, 
Text, 
View, 
TextInput, 
TouchableOpacity, 
Alert 
} from 'react-native'; 

export default class LoginScreen extends Component { 
    constructor(props) { 
    super(props); 
    this.state={ 
     telephone: '', 
     password: '' 
    } 
    this.onLogin=this.onLogin.bind(this); 

} 
render() { 
    return (
    <View style={styles.container}> 
     <Text style={styles.title} >Login</Text> 
     <View style={styles.form}> 
      <TextInput onChange={(e) => this.setState({telephone: 
      e.target.value})} 
      value={this.state.telefon} keyboardType='numeric' maxLength={9} 
      returnKeyType='next' underlineColorAndroid="#BAAC9A" style= 
      {styles.telinput} placeholder="Telephone"></TextInput> 
      <TextInput onChange={(e)=>{this.setState({password: 
      e.target.value})}} 
      value={this.state.password} style={styles.passinput} 
      secureTextEntry returnKeyType='send' placeholder="Password"> 
      </TextInput> 
     </View> 
     <TouchableOpacity style={styles.buttoncontainer} onPress= 
     {this.onLogin} > 
      <Text style={styles.buttontext}>LOGIN</Text> 
     </TouchableOpacity> 
     <Text style={styles.subtext}>Not registered?</Text> 
    </View> 
) 
} 

onLogin() { 
var {telephone, password} = this.state; 
alert('telephone='+ encodeURIComponent(telephone)+'&password='+ 
encodeURIComponent(password)); 
} 
} 
..styles 

私は電話=未定義&パスワード=未定義を取得しています。 また、（コンストラクタでバインドせずに）onLogin arrow関数を作成しようとしましたが、警告も表示されません。 質問はonLogin関数で状態を取得する方法と、なぜアラートが矢印で機能しないのかあなたのコード内の関数

Answer 1

は、私はあなたがevent.target.valueは、Webプラットフォームのために理にかなって使用e.target.value

<TextInput onChange={(e) => this.setState({telephone: 
    e.target.value})} 

でTextInputを使用している参照してください。

公式文書https://facebook.github.io/react-native/docs/textinput.htmlは、このようにTextInputを使用すると言います。 event.target.valueはありません。

<TextInput 
    onChangeText={(text) => this.setState({text})} 
    value={this.state.text} 
/> 

Answer 2

あなたonChangeハンドラ内で変更イベントにアクセスし、e.target.valueから値を読み取るしようとしています。これはブラウザ上で動作しますが、あなたはReact Nativeのネイティブスペースで作業しており、従来のReact SyntheticEventにアクセスすることはできません。代わりに、APIの<TextInput />コンポーネントは、onChangeTextメソッドに渡される値としてtextを公開します。これはブラウザのe.target.valueに相当し、フードの下での実装が異なります。

<TextInput onChangeText={(text)=>{this.setState({password: text})}} />; 

これは、それに応じてstateを更新する必要がありますし、onLoginでそれにアクセスできるようにする必要があります。このように見えるようにあなたのsetStateの呼び出しを変更します。

矢印機能をonLoginに使用する場合は、クラスプロパティの変換には特定のbabel設定が必要です（この機能はまだステージ2にあります）。このプラグインは、トリックを行う必要があります：https://babeljs.io/docs/plugins/transform-class-properties/

Answer 3

を私はあなたのコードのいくつかのマイナーなエラーを見て、私はすぐにスナックに取り組ん例を書いた：を通して、あなたのコードに比べていくつかの違いがあるかどうかということhttps://snack.expo.io/@zvona/a-simple-login-form

チェック。