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

Question

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

这是我的代码：

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

标签： javascriptreact-nativereact-native-android

Answer 1

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

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