どのように反応でUseformik propを使用してformikを使用する

18950 ワード
react css beginners javascript テキストリンク
FormIkは超クールなライブラリであり、私は毎回それを使用します.今日、私は初心者のためにこのポストを書いています、そして、それは単純なログインフォームの上でformikの使用をカバーします.
ここでこれらをカバーします
  • Create and style a basic login form
  • Initialize formik default states
  • Apply validation on login fields
  • Write submit form function

    • ログインフォームの作成とスタイル

    I created login form like this

          <form className="form">
        <div className="field">
          <label htmlFor="email">Email Address</label>
          <input
            id="email"
            name="email"
            type="email"
          />
        </div>
        <div className="field">
          <label htmlFor="password">Password</label>
          <input
            id="password"
            name="password"
            type="password"
          />
        </div>
        <button type="submit" className="submit-btn">
          Login
        </button>
      </form>

    and styled it like this

    .form {
  width: 300px;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  background-color: #ddd;
  border-radius: 8px;
  padding: 10px;
}
.field {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}
.submit-btn {
  align-self: flex-end;
  width: 80px;
}
    After this, you'll get a login form same as this

    デフォルト状態

    Lets import the useFormik first from the formik

    import { useFormik } from "formik";

    Now you can create a formik object using useFormik hook and define your initialValues in it

      const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    }
  });

    let's use the formik handleChange function and pass formik values to our input fields

         ...
          <input
            id="email"
            name="email"
            type="email"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.email}
          />
     ...
          <input
            id="password"
            name="password"
            type="password"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.password}
          />

    ログインフィールドに妥当性検査を適用する

    I used Yup library to apply validations on my fields. You can use custom regex as well if you don't want to use Yup for some reason.
    So first import Yup like this

    import * as Yup from "yup";

    Then I added validationSchema for my login fields

     const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    },
    validationSchema: Yup.object().shape({
      email: Yup.string()
        .email("Invalid email address")
        .required("Please enter email"),
      password: Yup.string().required("Please enter password")
    }),
  });

    Here Yup is validating if the values of the field are provided; if yes, then is it correct format or not.
    So if any error happens according to our validation schema, it will be stored in formik's errors object and we can print it beside or below the field like this

         {formik.touched.email && formik.errors.email ? (
         <span className="error">{formik.errors.email}</span>
     ) : null}
    Now our form looks like this with validation errors

    フォームを書き込む

    The last step is to create submit function and perform your operation on formik values. You can navigate to the next screen, call API, or anything you want to do. I just set a state on submit and shown a message to a user on the login

      const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    },
    validationSchema: Yup.object().shape({
      email: Yup.string()
        .email("Invalid email address")
        .required("Please enter email"),
      password: Yup.string().required("Please enter password")
    }),
    onSubmit: (values) => {
      setIsLoggedIn(true);
    }
  });

    and pass formik handleSubmit function to your form like this

    <form className="form" onSubmit={formik.handleSubmit}>

    and here your form is ready with field validations!!
    You can find the full source code here

    15686号から揚げG 5
    [1406]編集