将formik与typescript一起使用(离子)

npm install formik react react-dom @types/react @types/react-dom

import React from 'react';
import { useFormik } from 'formik';

const MyForm: React.FC = () => {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
    },
    onSubmit: (values) => {
      console.log(values);
    },
    validate: (values) => {
      const errors: any = {};
      if (!values.name) {
        errors.name = 'Required';
      }
      if (!values.email) {
        errors.email = 'Required';
      }
      return errors;
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="text"
        name="name"
        value={formik.values.name}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
      {formik.touched.name && formik.errors.name && (
        <div>{formik.errors.name}</div>
      )}

      <input
        type="email"
        name="email"
        value={formik.values.email}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
      />
      {formik.touched.email && formik.errors.email && (
        <div>{formik.errors.email}</div>
      )}

      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

import React from 'react';
import { IonContent, IonPage } from '@ionic/react';
import MyForm from './MyForm';

const HomePage: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <MyForm />
      </IonContent>
    </IonPage>
  );
};

export default HomePage;