Javascript 材料UI文本字段错误在reactjs中无法正常工作

我使用的是功能组件和材质ui。我创建了一个包含2个文本字段的表单。我只想在满足特定条件时启用error prop。并且仅当单击提交按钮时才检查条件。不知何故，它只检查了很少的条件。我不明白为什么会发生这种情况

如果有人能看看我的代码并帮助我：

代码：

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import image from '../images/app_icon_without_bg.png'

import {Link} from 'react-router-dom'
import Button from '@material-ui/core/Button/index'
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
import Card from '@material-ui/core/Card'
import TextField from '@material-ui/core/TextField'
import Avatar from '@material-ui/core/Avatar'
import {amber} from '@material-ui/core/colors'
import {makeStyles} from '@material-ui/core/styles'
import {styled} from '@material-ui/core/styles'
import {Redirect} from "react-router-dom"

const MyCard = styled(Card)({

    borderRadius: 20,
    // boxShadow:'0 3px 5px 2px rgba(255, 105, 135, .3)',
    background: '#f3f3f3',
    boxShadow: '6px 6px 10px 0px rgba(112,112,112,0.16), -6px -6px 10px 0px #FFFFFF',
    padding: '50px 10px',
})


const MyAvatar = styled(Avatar)({
    background: 'linear-gradient(45deg, #008080 30%, #20B2AA 90%)',
    border: 0,
    color: 'white',
    height: 90,
    width: 90,
    margin: "auto",

})

const MyButton = styled(Button)({
    background: 'linear-gradient(45deg, #008080 30%, #20B2AA 90%)',
    border: 0,
    color: 'white',
    width: 100,
    justifyContent: "center",
    textDecoration: "none",
    boxShadow: '0px 8px 10px -5px rgba(124,133,133,1)'
    // margin:"auto"
})


// const useStyles = makeStyles((theme) => ({
//     root: {
//         display: 'flex',
//         '& > *': {
//             margin: theme.spacing(1),
//         },
//     },
//
//
//     amber: {
//         backgroundColor: amber[500],
//         width: theme.spacing(7),
//         height: theme.spacing(7),
//
//     },
//
//     button_color:{
//         backgroundColor: amber[500],
//
//     }
//
//
// }))


function Login() {
    // const classes = useStyles()


    //USE EFFECT
    useEffect(() => {
        }, []
    )

    //SETTING THE STATES
    // const [username,setUserName]=useState('')
    // const [password,setPassword]=useState('')
    // const [errorMessage,setErrorMessage]=useState('')

    const [form, setForm] = useState({
        username: '',
        password: '',
        errorUser: false,
        errorPassword: false,
        helperTextUserName: '',
        helperTextPassword: ''


    })


    const changeHandler = (event) => {
        setForm({
            ...form,
            [event.target.name]: event.target.value
        })
    }


    //POSTING USERNAME AND PASSWORD TO DB
    function handleClick(event) {
        event.preventDefault()

        const userObject = {
            userName: form.username,
            password: form.password
        }

        let letters = /^[A-Za-z0-9]+$/

        // let isValid = letters.test(form.username)
        // let err = ''


        if (form.username !== '' && !form.username.match(letters)) {
            // err = <p>Please enter your username.</p>
            setForm({
                ...form,
                helperTextUserName: 'Please use alphanumerics.',
                errorUser: true
            })
        }
        else if (form.username === '') {
            // err = <p>Please enter your username.</p>
            setForm({
                ...form,
                helperTextUserName: 'Please enter your username.',
                errorUser: true
            })

        } else if (form.password === '') {
            // err = <p>Please enter your password.</p>
            setForm({
                ...form,
                helperTextPassword: 'Please enter your password.',
                errorPassword: true
            })


        } else if (form.username === '' && form.password === '') {
            // err = <p>Please fill the fields to proceed.</p>
            setForm({
                ...form,
                helperTextUserName: 'Please fill the fields.',
                errorUser: true,
                errorPassword: true
            })

        } else {
            axios.post(`/api/login`, userObject)
                .then(window.location = "/home")
                .catch(err => console.error(err))

        }

    }


    return (

        <div className='login'>
            <MyCard className='card'>

                <div>

                    <img src={image} width="90" height="100px"/>
                    <p className={'card-heading-main'}>COMPLAINT MANAGEMENT SYSTEM</p>

                    <form>
                        <TextField
                            error={form.errorUser}
                            helperText={form.helperTextUserName}
                            autoFocus
                            id="outlined-basic"
                            variant="outlined"
                            type="username"
                            label="Username"
                            name={'username'}
                            className={'login-input'}
                            placeholder="john123"
                            onChange={changeHandler}
                        />
                        <br/>
                        <br/>

                        <TextField
                            error={form.errorPassword}
                            helperText={form.helperTextPassword}
                            id="outlined-basic"
                            variant="outlined"
                            label="Password"
                            name={'password'}
                            className={'login-input'}
                            type="password"
                            onChange={changeHandler}
                        />

                        <br/>
                        <br/>
                        <br/>
                        <MyButton onClick={handleClick} variant="raised">Submit</MyButton>
                    </form>
                </div>
            </MyCard>
        </div>
    )
}

export default Login

import React，{useState，useffect}来自“React”
从“axios”导入axios
从“../images/app\u icon\u导入图像，不带\u bg.png”
从“react router dom”导入{Link}
从“@material ui/core/Button/index”导入按钮
从“@material ui/core/styles/MuiThemeProvider”导入MuiThemeProvider
从“@material ui/core/Card”导入卡片
从“@material ui/core/TextField”导入TextField
从“@material ui/core/Avatar”导入化身
从“@material ui/core/colors”导入{amber}”
从“@material ui/core/styles”导入{makeStyles}
从“@material ui/core/styles”导入{styled}
从“react router dom”导入{Redirect}
const MyCard=样式化（卡片）({
边界半径：20，
//boxShadow:'0 3px 5px 2px rgba（255、105、135、3）'，
背景：“#f3”，
boxShadow:'6px 6px 10px 0px rgba（112112112,0.16），-6px-6px 10px 0px#FFFFFF'，
填充：“50px 10px”，
})
const MyAvatar=styled（化身）({
背景：“线性梯度（45度，#008080 30%，#20B2AA 90%），
边界：0，
颜色：'白色'，
身高：90，
宽度：90，
页边空白：“自动”，
})
const MyButton=已设置样式（按钮）({
背景：“线性梯度（45度，#008080 30%，#20B2AA 90%），
边界：0，
颜色：'白色'，
宽度：100，
辩护内容：“中心”，
文本装饰：“无”，
boxShadow:'0px 8px 10px-5px rgba（124133133,1）'
//页边空白：“自动”
})
//const useStyles=makeStyles（（主题）=>({
//根目录：{
//显示：“flex”，
//         '& > *': {
//边距：主题。间距（1），
//         },
//     },
//
//
//琥珀色：{
//背景颜色：琥珀色[500]，
//宽度：主题。间距（7），
//高度：主题。间距（7），
//
//     },
//
//按钮颜色：{
//背景颜色：琥珀色[500]，
//
//     }
//
//
// }))
函数登录（）{
//常量类=useStyles（）
//使用效果
useffect（（）=>{
}, []
)
//设定状态
//const[username，setUserName]=useState（“”）
//const[password，setPassword]=useState（“”）
//常量[errorMessage，setErrorMessage]=使用状态（“”）
const[form，setForm]=useState({
用户名：“”，
密码：“”，
错误用户：错，
错误密码：false，
helperTextUserName:“”，
helperTextPassword:“”
})
常量changeHandler=（事件）=>{
刚毛({
…形式，
[event.target.name]：event.target.value
})
}
//将用户名和密码发布到数据库
函数handleClick（事件）{
event.preventDefault（）
常量用户对象={
用户名：form.userName，
密码：form.password
}
让字母=/^[A-Za-z0-9]+$/
//让isValid=letters.test（form.username）
//让err=''
if（form.username！=''&&！form.username.match（字母））{
//err=请输入您的用户名

刚毛({
…形式，
helperTextUserName:“请使用字母数字。”，
错误用户：是的
})
}
else if（form.username==''）{
//err=请输入您的用户名

刚毛({
…形式，
helperTextUserName:“请输入您的用户名。”，
错误用户：是的
})
}else if（form.password==''）{
//err=请输入密码

刚毛({
…形式，
helperTextPassword:“请输入您的密码。”，
错误密码：true
})
}else if（form.username===''&&form.password===''）{
//err=请填写字段以继续

刚毛({
…形式，
helperTextUserName:“请填写字段。”，
没错，
错误密码：true
})
}否则{
post（`/api/login`，userObject）
.然后（window.location=“/home”）
.catch（err=>console.error（err））
}
}
返回(
投诉管理系统











提交
)
}
导出默认登录名

编辑：

---

上面的代码现在运行正常。

您需要防止默认的提交按钮行为，并且忘记在以前的状态下合并，这导致在该状态中放置不正确的数据。（

用户名

或

密码

=

未定义

将通过所有检查）

//将用户名和密码发布到数据库
函数handleClick（evt）{
evt.preventDefault（）；
常量用户对象={
用户名：form.userName，
密码：form.password
}
让username=form.username
让password=form.password
让字母=/^[0-9a-zA-Z]+$/
让err=''
如果（用户名！=''&&！用户名.匹配（字母））{
//err=请输入您的用户名

刚毛({
…形式，
helperTextUserName:“请使用字母数字。”，
错误用户：是的
})
}
如果（用户名==''）{
//呃