onPress表单提交和价值处理

Question

我正在尝试提交表单并使用表单值调用reducer，但是我无法设法获取值。

这是我的表单的样子：

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

}