无法读取表单验证中未定义的属性"值"

Question

我有一个问题。我正在尝试验证我的表单并检查输入或ampty值。它工作正常。但当我试图在输入中写入文本时，我会出现错误"；无法读取未定义的"的属性"value"；。我不明白这件事。为什么我得到它？我该如何摆脱它？非常感谢。

这是我的代码：

import React, { Component, useState } from 'react'
import { View, TextInput } from 'react-native'
import { MyButton, ErrorMessage } from '../uikit'
import { FormStyle, InputStyle } from '../constants/styles'
import { LOG_IN } from '../routes'
export class SignIn extends Component {
state = {
isValidPasword: true,
isEqual: true,
isValidMail: true,
currentPassword: '',
textInputEmail: '',
confirmTextInput: ''
}
isValid = () => {
const {
isEqual, isValidPasword, isValidMail,
currentPassword, textInputEmail, confirmTextInput
} = this.state
if (textInputEmail == '') {
return alert("Email is empty!")
}
if (!isValidMail) {
return alert("Email is invalid!")
}
if (currentPassword == '') {
return alert("Password is empty!")
}
if (!isValidPasword) {
return alert("Password is invalid!")
}
if (!isEqual) {
return alert("Passwords aren't matching")
}
if (confirmTextInput == '') {
return alert("'Confirm password' field is empty!")
}
this.props.navigation.navigate(LOG_IN)
}
isEnoughSymbols = (text) => {
if (text.trim().length < 8) {
this.setState({ isValidPasword: false })
}
else {
this.setState({ isValidPasword: true })
}
}
isMatch = (text) => {
if (text != this.state.currentPassword) {
this.setState({ isEqual: false })
}
}
isMail = (text) => {
const pattern = /b[a-z0-9._]+@[a-z0-9.-]+.[a-z]{2,4}b/i
let res = text.search(pattern)
res == -1 ? this.setState({ isValidMail: false }) : this.setState({ isValidMail: true })
}
checkEmptyness = (value) => {
return !value ? false : true
}
render() {
const { mainContainer, buttons } = FormStyle
const { container, text } = InputStyle
const { isValidPasword, isEqual, isValidMail, currentPassword } = this.state
return (
<View style={mainContainer}>
<View style={container}>
<TextInput
style={text}
placeholder={'Email'}
onChangeText={(e) => this.setState({ textInputEmail: e.target.value })}
onEndEditing={(e) => this.isMail(e.nativeEvent.text)}
>
</TextInput>
{
isValidMail ? null : <ErrorMessage errorText={'Invalid email!'} />
}
</View>
<View style={container}>
<TextInput
style={text}
placeholder={'Password'}
secureTextEntry={true}
onChangeText={(e) => this.setState({ currentPassword: e.target.value })}
onEndEditing={(e) => this.isEnoughSymbols(e.nativeEvent.text)}
>
</TextInput>
{
isValidPasword ? null : <ErrorMessage errorText={'Password must have at least 8 symbols!'} />
}
</View>
<View style={container}>
<TextInput
style={text}
secureTextEntry={true}
placeholder={'Confirm password'}
>
</TextInput>
{
isEqual ? null : <ErrorMessage errorText={'Passwords not matching'} />
}
</View>
<View style={buttons}>
<MyButton
name={'confirm'.toUpperCase()}
onPress={() => this.isValid()} />
</View>
</View>
)
}
}

Answer 1

这是因为您这样绑定onChange函数：onChangeText＝｛(e(＝>this.setState(｛currentPassword:e.target.value｝(｝

您可以直接使用，如：onChangeText＝｛(e(＝>this.setState(｛currentPassword:e｝(｝