使用MaterialUI和ReactJS提交和验证表单

npm install @material-ui/core @material-ui/icons react-hook-form yup

import React from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { TextField, Button, Grid } from '@material-ui/core';

const schema = yup.object().shape({
  name: yup.string().required('姓名不能为空'),
  email: yup.string().email('请输入正确的邮箱地址').required('邮箱不能为空'),
  password: yup.string().min(6, '密码至少需要6位').required('密码不能为空'),
});

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  // ...后续代码
}

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Grid container spacing={2}>
        <Grid item xs={12} sm={6}>
          <TextField
            label="姓名"
            variant="outlined"
            inputRef={register}
            name="name"
            error={!!errors.name}
            helperText={errors.name ? errors.name.message : ''}
            fullWidth
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField
            label="邮箱"
            variant="outlined"
            inputRef={register}
            name="email"
            error={!!errors.email}
            helperText={errors.email ? errors.email.message : ''}
            fullWidth
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            label="密码"
            type="password"
            variant="outlined"
            inputRef={register}
            name="password"
            error={!!errors.password}
            helperText={errors.password ? errors.password.message : ''}
            fullWidth
          />
        </Grid>
        <Grid item xs={12}>
          <Button type="submit" variant="contained" color="primary">
            提交
          </Button>
        </Grid>
      </Grid>
    </form>
  );

import '@material-ui/core/styles';