Formik和Material-UI

npm install yup

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import { TextField, Button } from '@material-ui/core';

const validationSchema = Yup.object({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email').required('Email is required'),
});

const MyForm = () => (
  <Formik
    initialValues={{ name: '', email: '' }}
    validationSchema={validationSchema}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    {({ errors, touched }) => (
      <Form>
        <Field
          as={TextField}
          name="name"
          label="Name"
          error={touched.name && Boolean(errors.name)}
          helperText={touched.name && errors.name}
        />
        <Field
          as={TextField}
          name="email"
          label="Email"
          error={touched.email && Boolean(errors.email)}
          helperText={touched.email && errors.email}
        />
        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </Form>
    )}
  </Formik>
);

export default MyForm;