使用 Material UI TextField 和 Typscript 进行 React 表单验证不起作用

Question

我尝试使用 typescript 进行反应，使用 MUI 库编写“注册”页面的代码。 在每个 TextField 标签中我添加了“必需” 但在提交时，验证不起作用。 我寻找任何其他验证，但在 MUI 网站上没有找到其他方法。 你能帮助我吗？谢谢提前。

这是注册组件代码：

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import globals from '../../Utils/Globals';
import { useForm } from 'react-hook-form';
import axios from 'axios';
import notify from '../../Utils/Notify';
import { SysErrs } from '../../Utils/SysErrs';
import { UserModel } from '../../Models/UserModel';

 function Copyright (props: any): JSX.Element {    
    
  return (
    <Typography variant="body2" color="text.secondary" align="center" {...props}>
      {'Copyright © '}
      <Link color="inherit" href="https://mui.com/">
        Chana Kurtz
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
  }
const URLregister = globals.urls.guest + "register/"
const theme = createTheme();

export default function SignUp() {

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const json = JSON.stringify(Object.fromEntries(data)); 
    console.log(json);
    axios.post(URLregister, data)
        .then(response => {
            notify.success(SysErrs.REGISTERD)
            // reset({})
            
        })
        .catch(error => {
            notify.error(SysErrs.EMAIL_IN_USE)
        })
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    });
    
  };



  return (
    
    <ThemeProvider theme={theme}>
     
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <Box
          sx={{
            marginTop: 8,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign up
          </Typography>
          <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoComplete="given-name"
                  name="firstName"
                  required={true}
                  fullWidth
                  id="firstName"
                  label="First Name"
                  autoFocus
                />
                
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  required={true}
                  fullWidth
                  id="lastName"
                  label="Last Name"
                  name="lastName"
                  autoComplete="family-name"
                  helperText="Min length must be 2 characters"
                  
                />
                </Grid>
              <Grid item xs={12}>
                <TextField
                  required={true}
                  fullWidth
                  id="userName"
                  label="User Name"
                  name="userName"
                  autoComplete="User-Name"
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  required={true}
                  fullWidth
                  id="email"
                  label="Email Address"
                  name="email"
                  autoComplete="email"
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  required={true}
                  fullWidth
                  name="password"
                  label="Password"
                  type="password"
                  id="password"
                  autoComplete="new-password"
                />
              </Grid>
              <Grid item xs={12}>
                <FormControlLabel
                  control={<Checkbox value="allowExtraEmails" color="primary" />}
                  label="I want to receive inspiration, marketing promotions and updates via email."
                />
              </Grid>
            </Grid>
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            >
              Sign Up
            </Button>
            <Grid container justifyContent="flex-end">
              <Grid item>
                <Link href="#" variant="body2">
                  Already have an account? Sign in
                </Link>
              </Grid>
            </Grid>
          </Box>
        </Box>
        <Copyright sx={{ mt: 5 }} />
      </Container>
    </ThemeProvider>
  );
        }
      

Answer 1

您需要用

FormControl

组件包裹它。

更多文档在这里：表单控件

Answer 2

我尝试用 FormControl 来结束，但它不起作用。我目前使用的是 MUI v5。两个道具对我不起作用 1. 必需，另一个是键入电子邮件。它不会抛出任何错误并接受任何文本作为值。