javascript - React-native hooks 表单验证
问题描述
我正在练习 React Native。我创建了两个输入字段。用户可以在其中键入电子邮件和密码。我用三个变量创建了一个状态,它们是电子邮件、密码和错误消息。对于电子邮件验证,我使用了 Firebase。当提交表单而不填写我得到的任何内容时invalid error
,这意味着我的 Firebaseauth
工作。但是当用电子邮件和密码字段填写表格时,我收到错误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 ........
onChangeText
我使用的是onChange
. 我也尝试过,onChangeText
但我得到了同样的错误。有没有办法在功能组件中提交反应原生表单?
这是我的登录表格
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;
`
解决方案
我建议你使用TextInput
react-native 库:
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>
我希望这会有所帮助,并且不要忘记仔细检查导入每个组件以避免错误。
推荐阅读
- bash - 在 mac os 中更新 bash
- android - Pjsip Android 中的呼叫转移返回 403 Forbidden
- python - 如何使用 OpenCV 对图像中的像素组进行分组和突出显示?
- perl - 为什么在 Perl 中使用 &getcwd() 而不是 getcwd()?
- go - 为什么在这个函数中使用通道?
- python - 重新查找类别 S 和 P 的错误转义
- node.js - NodeJS - 从另一个异步 Lambda 函数调用异步 Lambda
- maven - JUnit 和 TestNG 一起运行返回“分叉的 VM 在没有正确告别的情况下终止。VM 崩溃或 System.exit 被调用?”
- ios - ios版本之间的UIStackView不同的显示隐藏动画
- node.js - 如果与 express 有共享会话,是否需要验证 socket.io 连接?