onPress 양식 제출 및 값 처리

Question

양식을 제출하고 양식 값으로 감속기를 호출하려하지만 값을 가져올 수 없습니다. 내가 버튼을 클릭하고 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" } 
    }); 
    } 
} 

: 같은 로그인 기능이 모습입니다 여기

<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()} 
> 

과 :

여기처럼 내 양식이 어떻게 표시되는지를 보여줍니다 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> 
     ) 
    } 

}