zoukankan      html  css  js  c++  java
  • 【没有灵魂的记录】【Formik+Yup】

    1. formmik+Yup

    // Helper styles for demo
    import "./helper.css";
    import { MoreResources, DisplayFormikState } from "./helper";
    
    import React from "react";
    import { render } from "react-dom";
    import { Formik } from "formik";
    import * as Yup from "yup";
    
    const App = () => (
      <div className="app">
        <h1>
          Basic{" "}
          <a
            href="https://github.com/jaredpalmer/formik"
            target="_blank"
            rel="noopener noreferrer"
          >
            Formik
          </a>{" "}
          Demo
        </h1>
    
        <Formik
          initialValues={{ email: "" }}
          onSubmit={async values => {
            await new Promise(resolve => setTimeout(resolve, 500));
            alert(JSON.stringify(values, null, 2));
          }}
          validationSchema={Yup.object().shape({
            email: Yup.string()
              .email()
              .required("Required")
          })}
        >
          {props => {
            const {
              values,
              touched,
              errors,
              dirty,
              isSubmitting,
              handleChange,
              handleBlur,
              handleSubmit,
              handleReset
            } = props;
            return (
              <form onSubmit={handleSubmit}>
                <label htmlFor="email" style={{ display: "block" }}>
                  Email
                </label>
                <input
                  id="email"
                  placeholder="Enter your email"
                  type="text"
                  value={values.email}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  className={
                    errors.email && touched.email
                      ? "text-input error"
                      : "text-input"
                  }
                />
                {errors.email && touched.email && (
                  <div className="input-feedback">{errors.email}</div>
                )}
    
                <button
                  type="button"
                  className="outline"
                  onClick={handleReset}
                  disabled={!dirty || isSubmitting}
                >
                  Reset
                </button>
                <button type="submit" disabled={isSubmitting}>
                  Submit
                </button>
    
                <DisplayFormikState {...props} />
              </form>
            );
          }}
        </Formik>
    
        <MoreResources />
      </div>
    );
    
    render(<App />, document.getElementById("root"));
    

      

    2.Formik(typescript)

    Render props (<Formik /> and <Field />)

    import * as React from 'react';
    import {
      Formik,
      FormikHelpers,
      FormikProps,
      Form,
      Field,
      FieldProps,
    } from 'formik';
    
    interface MyFormValues {
      firstName: string;
    }
    
    export const MyApp: React.FC<{}> = () => {
      const initialValues: MyFormValues = { firstName: '' };
      return (
        <div>
          <h1>My Example</h1>
          <Formik
            initialValues={initialValues}
            onSubmit={(values, actions) => {
              console.log({ values, actions });
              alert(JSON.stringify(values, null, 2));
              actions.setSubmitting(false);
            }}
            render={formikBag => (
              <Form>
                <Field
                  name="firstName"
                  render={({ field, form, meta }) => (
                    <div>
                      <input type="text" {...field} placeholder="First Name" />
                      {meta.touched && meta.error && meta.error}
                    </div>
                  )}
                />
              </Form>
            )}
          />
        </div>
      );
    };

    withFormik()

    import React from 'react';
    import * as Yup from 'yup';
    import { withFormik, FormikProps, FormikErrors, Form, Field } from 'formik';
    
    // Shape of form values
    interface FormValues {
      email: string;
      password: string;
    }
    
    interface OtherProps {
      message: string;
    }
    
    // Aside: You may see InjectedFormikProps<OtherProps, FormValues> instead of what comes below in older code.. InjectedFormikProps was artifact of when Formik only exported a HoC. It is also less flexible as it MUST wrap all props (it passes them through).
    const InnerForm = (props: OtherProps & FormikProps<FormValues>) => {
      const { touched, errors, isSubmitting, message } = props;
      return (
        <Form>
          <h1>{message}</h1>
          <Field type="email" name="email" />
          {touched.email && errors.email && <div>{errors.email}</div>}
    
          <Field type="password" name="password" />
          {touched.password && errors.password && <div>{errors.password}</div>}
    
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      );
    };
    
    // The type of props MyForm receives
    interface MyFormProps {
      initialEmail?: string;
      message: string; // if this passed all the way through you might do this or make a union type
    }
    
    // Wrap our form with the withFormik HoC
    const MyForm = withFormik<MyFormProps, FormValues>({
      // Transform outer props into form values
      mapPropsToValues: props => {
        return {
          email: props.initialEmail || '',
          password: '',
        };
      },
    
      // Add a custom validation function (this can be async too!)
      validate: (values: FormValues) => {
        let errors: FormikErrors = {};
        if (!values.email) {
          errors.email = 'Required';
        } else if (!isValidEmail(values.email)) {
          errors.email = 'Invalid email address';
        }
        return errors;
      },
    
      handleSubmit: values => {
        // do submitting things
      },
    })(InnerForm);
    
    // Use <MyForm /> wherevs
    const Basic = () => (
      <div>
        <h1>My App</h1>
        <p>This can be anywhere in your application</p>
        <MyForm message="Sign up" />
      </div>
    );
    
    export default Basic;
    

      

  • 相关阅读:
    URAL 2046 A
    URAL 2056 Scholarship 水题
    Codeforces Gym 100286I iSharp 水题
    Codeforces Gym H. Hell on the Markets 贪心
    Codeforces Gym 100286G Giant Screen 水题
    Codeforces Gym 100286B Blind Walk DFS
    Codeforces Gym 100286F Problem F. Fibonacci System 数位DP
    Codeforces Gym 100286A. Aerodynamics 计算几何 求二维凸包面积
    Codeforces Gym 100418K Cards 暴力打表
    Codeforces Gym 100418J Lucky tickets 数位DP
  • 原文地址:https://www.cnblogs.com/Ewarm/p/12970610.html
Copyright © 2011-2022 走看看