onPressフォームの提出と値の処理

Question

私はフォームを提出しようとしていますが、値を取得することはできません。

<Field 
    name="email" 
    component={this.renderInput} 
    type="email" 
    validate={[email, required]} 
/> 
<Field 
    name="password" 
    component={this.renderInput} 
    type="password" 
    validate={[alphaNumeric, minLength8, maxLength15, required]} 
/> 

<Button 
    rounded 
    primary 
    block 
    large 
    style={styles.loginBtn} 
    onPress={() => this.login()} 
> 

、ここでログイン機能は次のようになります。：

login() { 
    if (this.props.valid) { 
    //do something here, but how to get the data? 
    } else { 
    Toast.show({ 
     text: "Enter Valid Username & password!", 
     duration: 2500, 
     position: "top", 
     textStyle: { textAlign: "center" } 
    }); 
    } 
} 

私はボタンをクリックしてlogin()機能を取得、さらには渡すことができます。ここ

は私のフォームは次のようになります。 if（this.props.valid）のチェックをしましたが、ログイン機能で電子メールとパスワードの値を取得する方法がわかりません。

Answer 1

アクセスするには、メモリに入力を保存する必要があります。これはネイティブコンポーネントではありませんが、これはどのようにしてこの値を設定/取得するのかです：

注：パッケージのドキュメントでonChangeText（）コールバックを検索したい場合があります。

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

export default class SO_LoginExample extends Component<{}> { 
    constructor(props) { 
     super(props); 
     this.state = { 
      email: undefined, 
      password: undefined, 
     } 
    } 

    login() { 
     console.log(this.state.email, this.state.password); 
    } 

    render() { 
     return(
      <View> 
       <TextInput 
        style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
        onChangeText={(inputVal) => this.setState({email: inputVal})} 
       value={this.state.email} 
       /> 
       <TextInput 
        style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
        secureTextEntry={true} 
        onChangeText={(inputVal) => this.setState({password: inputVal})} 
       value={this.state.password} 
       /> 
       <Button 
        title="Login" 
        onPress={() => this.login()} 
       /> 
      </View> 
     ) 
    } 

}