"Formik + Yup 不适用于带有语义 UI 的 React"

Question

我正在使用 Formik 和 Yup 实现一个注册表单进行验证。 我使用 React 和 Semantic UI，UI 如下所示： <\/a>

这是我的代码：

import React from "react";
import { Segment, Grid, Header, Message, Form, Button } from 'semantic-ui-react';
import { Link } from "react-router-dom";
import { Formik } from "formik"; 
import * as Yup from "yup"; 
import {
  FormikDebug
} from "formik-semantic-ui-react";

interface FormValues {
  email: string,
  username: string, 
  password: string
}

const Signup = () => {

  const initialValues: FormValues = {
    email: '',
    username: '',
    password: ''
  };

  const validation = Yup.object({
    email: Yup.string().email("Invalid email address").required("Email required"),
    username: Yup.string()
      .min(6, "Must be at least 6 characters")
      .required("Username required"),
    password: Yup.string()
      .min(8, "Must be at least 8 characters")
      .required("Required"),
    // confirmPassword: Yup.string()
    // .oneOf([Yup.ref('password'), null], 'Password must match')
    // .required('Confirm password is required'),
  });

  return (
    <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
    <Grid.Column style={{ maxWidth: 450 }}>
      <Header as='h1' color='teal' textAlign='center'>
         mysketch.io
      </Header>
      <Header color='teal'>
        Sign up to see photos and videos from your friends
      </Header>
        
      <Formik
        initialValues={initialValues}
        validationSchema={validation}
        onSubmit={values => 
          console.log(values)
        } 
      > 
        <Form size='large'>
          <Segment stacked>
            <Form.Input
              fluid icon='mail' 
              type="emai"
              iconPosition='left' 
              placeholder='E-mail address' 
              errorPrompt 
              name="email"
            />  
            <Form.Input 
              fluid
              icon='user'
              iconPosition='left'
              placeholder='username'
              errorPrompt
              name="username"
            />
            <Form.Input
              fluid
              icon='lock'
              iconPosition='left'
              placeholder='Password'
              type='password'
              errorPrompt
              name="password"
            />
            
            <Button type="submit" color='teal' fluid size='large'>
              Signup
            </Button>
          </Segment>
        </Form>
      </Formik>

      <Message>
        Have an account? <Link to="/">Log in</Link>
      </Message>

    </Grid.Column>
  </Grid>
  )
};

export default Signup;