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

弗拉基米尔

我有一个问题。我试图验证我的表单并检查输入值。它工作正常。但是,当我尝试在输入中写入文本时,出现错误“无法读取未定义的属性‘值’”。我不明白这件事。为什么我会得到它?我怎样才能摆脱它?非常感谢。

这是我的代码:

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>
        )
    }
}
拉胡尔

这是因为您像这样绑定了 onChange 函数: onChangeText={(e) => this.setState({ currentPassword: e.target.value })}

您可以直接使用: onChangeText={(e) => this.setState({ currentPassword: e })}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法读取表单中未定义错误的属性“值”

角度-表单验证-无法读取未定义的属性“名称”

redux 表单验证 - 无法读取未定义的属性“某些”

无法读取表单中未定义的属性“道具”

Angular无法读取组件/表单中未定义的属性

Redux表单中的“无法读取未定义的属性'nationalCode'”

TypeError:无法读取REACTJS中未定义的属性“值”

angularjs表单验证。TypeError:无法读取未定义的属性“ $ valid”

使用jquery表单验证插件时无法读取未定义的属性“ call”

jQuery表单验证程序错误,文件输入:无法读取未定义的属性“ toLowerCase”

Angular 6 表单验证 - 无法读取未定义的属性“名称”

简单的表单验证帮助“无法读取未定义的属性'elements'”

表单的Apps脚本返回,无法读取未定义错误的属性“值”

AngularJS表单无法读取未定义的属性'$ setPristine'

nodejs表单无法读取未定义的属性“docreate”

角2:无法读取未定义的属性“验证器”

值返回无法读取未定义的属性“值”

未捕获的类型错误:提交表单时无法读取 Javascript 中未定义的属性“init”

类型错误:无法读取 ReactJS 表单字段中未定义的属性“名称”

更新表单时无法读取 angularjs 中未定义的属性“1”

使用类验证器中的 @MinDate 会导致 TypeError:无法读取未定义的属性“getTime”?

无法读取Angular和Firebase身份验证中未定义的属性“用户”

无法在 React 中读取未定义的属性(读取“地图”)

无法在 Angular 中读取未定义的属性(读取“订阅”)

类型错误:无法读取未定义的属性“url”,无法从 reactjs 中的数组调用某些值

JQuery的3.4.1无法读取的未定义的属性“值”

未捕获的TypeError:无法读取未定义的属性“值”

ReactJS TypeError:无法读取未定义的属性“值”

Angular 6:TypeError:无法读取未定义的属性“值”