FORMIK DOMのためのseterrorsの使用

TLこんにちは!この記事の皆さん、私はFormek Domの中でseterrorsの使用についてあなたに共有したいです😫😫 を返します.
このシナリオでは、フィールドの分離のための
ステップバイステップ😊
1 )まず、以下の依存関係をインストールしているか確認してください.

Formik
npm install Formik --save

Yup
npm install Formik --save

2 .) 2番目に、カスタムformikのコンポーネントを

3 .)第3に、このコードに従ってください.
3.1 .)次の依存関係をインポートします.

import { useEffect, Fragment } from "react";
import { useFormikContext } from "formik";
import { Formik } from "formik";

私たちはformik DOMを使用しているので、useformikcontextを使用することができます.コードの読みやすく効果的な分離
3.2 .)フォルムライブラリのseterrorsのためのコンポーネントの使用
このコンポーネントはエラーメッセージ(seterrors)の支柱を受け取り、私たちのバックエンドリクエストからエラーを設定します.
私はバックエンド要求からのエラーが変化するたびにseterrors propのウォッチャーとしてuseeffectを使用しました.
私はformformkコンテキストを使用してformikプロバイダからformerkコンポーネントとしてseterrorsにアクセスします.

const FormikWithSetErrors = ({ children, setErrors })  => {

    const { setErrors:setBackendErrors } = useFormikContext();

    useEffect(()=>{
        if(setErrors) setBackendErrors(setErrors);
    },[setErrors]);

    return <Fragment>{children}</Fragment>;
}

3.3 .)から値を取得する
私たちのformikwithseterrorsが私達の子コンポーネントである間、私はformikコンポーネントを包みました.FormIkプロバイダーの値にアクセスします.

const FormikForm = ({ children, setErrors, ...otherProps }) => {
    return (
        <Formik {...otherProps}>
            <FormikWithSetErrors setErrors={setErrors}>
                {children}
            </FormikWithSetErrors>
        </Formik> 
    );
}

インデックス

import { useEffect, Fragment } from "react";
import { useFormikContext } from "formik";
import { Formik } from "formik";

const FormikWithSetErrors = ({ children, setErrors })  => {

    const { setErrors:setBackendErrors } = useFormikContext();

    useEffect(()=>{
        if(setErrors) setBackendErrors(setErrors);
    },[setErrors]);

    return <Fragment>{children}</Fragment>;
}

const FormikForm = ({ children, setErrors, ...otherProps }) => {
    return (
        <Formik {...otherProps}>
            <FormikWithSetErrors setErrors={setErrors}>
                {children}
            </FormikWithSetErrors>
        </Formik> 
    );
}

export default FormikForm;

UI用
私は高速デモと簡単なフロントエンドの開発のための材料UIを使用して
私は、サンプルフォームフィールドの少なくとも2つのコンポーネントを作りました.

  ./components
   ../Button/index.js
   ../TextField/index.js

次の2つのコンポーネントのスニペットコードです.
ボタン.js

import { useFormikContext } from "formik";
import { Button } from "@material-ui/core";

const FormButton = ({ children, otherProps }) => {
  const { submitForm } = useFormikContext();

  const handleSubmit = () => {
    // this will trigger the <Formik> prodiver
    submitForm();
  };

  const configFormButton = {
    ...otherProps,
    variant: "contained",
    color: "primary",
    fullWidth: true,
    onClick: handleSubmit
  };

  return <Button {...configFormButton}>{children}</Button>;
};

export default FormButton;

テキストフィールド/インデックス.js

import { TextField } from "@material-ui/core";
import { useField } from "formik";

const FormTextField = ({ name, ...otherProps }) => {
  const [field, meta] = useField(name);

  const configFormTextField = {
    ...field,
    ...otherProps,
    variant: "outlined",
    fullWidth: true,
    size: "small"
  };

  if (meta && meta.error) {
    configFormTextField.error = true;
    configFormTextField.helperText = meta.error;
  }

  return <TextField {...configFormTextField} />;
};

export default FormTextField;

クライアント検証用の検証スキーマを作成しました.ライブラリyupの使用

  ./components
     ../validationSchema.js

ValidationSchema.js

import * as Yup from "yup";

const ValidationSchema = Yup.object().shape({
  firstName: Yup.string().required("First Name is required")
});

export default ValidationSchema;

SetTimeoutを使ってFakeBackendフックリクエストを作成し、エラー応答メッセージの生成をシミュレートしました.

  ./components
     ../fakeBackend.js

ファークバックエンド.js

import { useState } from "react";

const useFakeBackend = () => {
  const [errors, setErrors] = useState({});

  // simulating a backend request
  const setRequest = () => {
    setTimeout(() => {
      setErrors((errors) => ({
        firstName: "Please enter a valid First Name "
      }));
    }, 2000);
  };

  return { errors, setRequest };
};

export default useFakeBackend;

最後に!今すぐそこにいた!😊😊😊
これは、シミュレーションのための我々の作成されたコンポーネントの最終的なセットアップです
アプリ.js

import { Grid } from "@material-ui/core";
import Formik from "./components/Formik/index";
import Button from "./components/Button/index";
import TextField from "./components/TextField/index";
import ValidationSchema from "./components/validationSchema";
import useFakeBackend from "./components/fakeBackend";

export default function App() {
  const { errors, setRequest } = useFakeBackend();

  return (
    <Formik
      initialValues={{ firstName: "" }}
      validationSchema={ValidationSchema}
      enableReinitialize={true}
      setErrors={errors}
      onSubmit={() => {
        alert("backend requesting...");
        setRequest();
      }}
    >
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <label>First Name</label>
        </Grid>
        <Grid item xs={12}>
          <TextField name="firstName" />
        </Grid>
        <Grid item xs={12}>
          <Button>Submit</Button>
        </Grid>
      </Grid>
    </Formik>
  );
}

今、私たちのUIフォームが完了です!

サンプルプロジェクト全体をここでforkできます.
https://codesandbox.io/s/formik-context-jsoe0?file=/src/App.js
それはみんなありがとう!😊😊😊