Как добавить пользовательские проверки для элементов управления пользовательского интерфейса React Material?

Question

Я использую ReactJs в приложении, и мне нужно добавить проверку по всем моим полям.

Я хочу добавить проверку по имени, номеру телефона, электронной почте, паролю и подтвердить пароль.

Когда кто-нибудь введет в эти поля некоторые недействительные данные, сообщения о проверке должны отображаться с полями.

import React from 'react';   
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

const useStyles = makeStyles((theme) => ({
  paper: {
    display: 'flex',
    flexDirection: 'column',
  }
}));

export default function RegisterForm() {
  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">        
      <div className={classes.paper}>        
        <form >
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <TextField
                autoComplete="name"
                name="name"
                variant="outlined"
                required
                error
                fullWidth
                id="name"
                label="Name"
                autoFocus
              />
            </Grid>           
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
              />
            </Grid>            
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="password"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                variant="outlined"
                required
                fullWidth
                name="repeatpassword"
                label="Repeat Password"
                type="password"
                id="repeatpassword"
                autoComplete="repeat-password"
              />
            </Grid>           
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Create
          </Button>         
        </form>
      </div>    
    </Container>
  );
}

Я новичок ie с реакцией. Что мне делать в моем коде?

Я взял пример кода для меню и карт отсюда: https://material-ui.com

Application built with
{
  "react": "16.13.0", 
  "react-dom": "^16.13.0", 
  "react-redux": "^7.2.0",
  "redux": "^4.0.4"
  "@material-ui/core": "^4.9.5"
}

Проблема, которую я face получает ошибку в следующей функции:

<TextField
                    autoComplete="name"
                    name="name"
                    variant="outlined"
                    required
                    error
                    fullWidth
                    id="name"
                    label="Name"
                    autoFocus
                  />

выше Текстовое поле отображает требуемую ошибку проверки при отправке формы, но это не то, что я пытаюсь реализовать. Я хочу настроить сообщения проверки и подтверждения для электронной почты, подтвердить электронную почту, номер телефона, пароль и подтвердить пароль в соответствии с рекомендуемым подходом.

Я пытался следовать инструкциям и искал примеры реализации, но не смог найти рекомендуемый путь решить вопрос.

Answer 1

Я использую formik и yup для достижения аналогичных целей в моих приложениях. Вот простой пример того, как смешать это: https://codesandbox.io/s/ol11mmk30z