React-native hooks 表单验证答案

【问题标题】：React-native hooks form validationReact-native hooks 表单验证
【发布时间】：2021-01-29 16:19:08
【问题描述】：

我正在练习 React Native。我创建了两个输入字段。用户可以在其中键入电子邮件和密码。我用三个变量创建了一个状态，它们是电子邮件、密码和错误消息。对于电子邮件验证，我使用了 Firebase。当提交表单而不填写任何我得到invalid error 时，这意味着我的firebase auth 有效。但是当用电子邮件和密码字段填写表格时，我收到错误Error: signInWithEmailAndPassword failed: First argument "email" must be a valid string.

当我控制台记录handleChange Events。我得到一堆对象。它看起来像这样：

am event SyntheticEvent {
  "_dispatchInstances": FiberNode {
    "tag": 5,
    "key": null,
    "type": "RCTSinglelineTextInputView",
  },
  "_dispatchListeners": [Function _onChange],
  "_targetInst": FiberNode {
    "tag": 5,
    "key": null,
    "type": "RCTSinglelineTextInputView",
  },
  "bubbles": undefined, and so on ........

我使用的是onChange，而不是 React native 的 onChangeText。我也试过onChangeText，但我得到了同样的错误。有没有办法在功能组件中提交 react native 表单？

这是我的登录表单

import React, { ReactElement, useState } from 'react';
import styled from 'styled-components';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';
import * as firebase from 'firebase';

interface Props {

}

export default function Login({ }: Props): ReactElement {

  const [state, setState] = useState({
    email: '',
    password: '',
    errorMessage: null
  })


  const { errorMessage } = state;

  const handleChange = event => {
    console.log("I am event", event);
    setState({
      ...state,
      [event.target.id]: event.target.value
    });
  };

  const handleSubmit = event => {
    event.preventDefault();
    const { email, password } = state;
    firebase.auth().signInWithEmailAndPassword(email, password).catch(error => setState({ errorMessage: error.message }))
  };


  // const handleSubmit = () => {
  //   const { email, password } = state;
  //   firebase.auth().signInWithEmailAndPassword(email, password).catch(error => setState({ errorMessage: error.message }))
  // }

  return (
    <Container>
      <Greeting >{`Hello again. \nWelcome Back`}</Greeting>
      <ErrorMessageContainer >
        {ErrorMessage && <ErrorMessage >{errorMessage} </ErrorMessage>}
      </ErrorMessageContainer>
      <Form style={{ marginHorizontal: 30 }}>
        <View>
          <InputTitle>
            Email Address
          </InputTitle>
          <Input
            autoCapitalize="none"
            onChange={handleChange}
            value={state.email}
            id="email"
          ></Input>
        </View>
        <View style={{ marginTop: 32 }}>
          <InputTitle>
            password
         </InputTitle>
          <Input
            secureTextEntry
            autoCapitalize="none"
            onChange={handleChange}
            value={state.password}
            id="password"
          ></Input>
        </View>
      </Form>
      <SubmitButton style={{ marginHorizontal: 30 }}
        onPress={handleSubmit}
      >
        <ButtonText>
          Sign In
                </ButtonText>
      </SubmitButton>
      <TouchableOpacity style={{ marginTop: 30, alignItems: "center" }} >
        <ButtonText style={{ color: "black", fontSize: 15 }}>
          New to Social App?
                  <Text style={{ fontWeight: "500", color: "#E9446A" }}> Sign up </Text>
        </ButtonText>
      </TouchableOpacity>
    </Container>
  )
};



const Container = styled.View`
          flex:1;

        `

const Greeting = styled.Text`
          margin-top: 30px;
          font-weight: 400;
          text-align: center;
          font-size: 20px
        `

const ErrorMessageContainer = styled.View`
          height: 72px;
          align-items: center;
          justify-content: center;
          margin-top: 30px;

        `


const ErrorMessage = styled.Text`
          font-weight: 500;
          color: red;
          font-size: 15px;
        `

const Form = styled.View`
          margin-bottom: 48px;
        `;
const InputTitle = styled.Text`
          color: #8a8f9e;
          font-size: 10px;
          text-transform: uppercase;
        `

const Input = styled.TextInput`
          border-bottom-color: #8a8f9e;
          border-bottom-width: 0.5px;
          height: 40px;
          font-size: 15px;
          color: black;
        `;
const SubmitButton = styled.TouchableOpacity`
          background-color: #00203FFF;
          height: 52px;
          border-radius: 4px;
          align-items: center;
          justify-content: center;

        `;
const ButtonText = styled.Text`
          color: #fff;
          font-weight: 500;
        `

【问题讨论】：

为什么不先在handleChange中使用console.log e，这样我们就可以仔细检查email的值了？
它未定义。我查过了
您从哪个库导入输入组件？
从哪里来：D.
我敢肯定，我在代码中犯了愚蠢的错误。因为我是新人react-native。我看不到错误

标签： javascript firebase react-native firebase-authentication react-hooks

【解决方案1】：

我建议你使用 react-native 库中的 TextInput： https://reactnative.dev/docs/handling-text-input

做这样的事情：

   const handleChange = (label, value) => {
    setstate({
      ...state,
      [label]: value
    })
  }

 <TextInput
                autoCapitalize="none"
                onChangeText={text => handleChange("email",text)}
                value={email}
                id="email"
              >
</TextInput>

我希望这会有所帮助，并且不要忘记仔细检查导入每个组件以避免错误。

【讨论】：