더 이상의 눈물 없이 Formik 처리 양식, 두 번째 섹션

따라와, 주제나 개선에 대한 당신의 건의를 들으니 기쁩니다/Chris

This is the continuation of our first part on Formik, the amazing Forms library for React

이 문서는 다음 시리즈의 일부입니다.

더 이상 눈물을 흘리지 말고 Formik로 표를 처리하세요. 두 번째 부분은 여기 있습니다

이 문서에서는 다음과 같이 설명합니다.

모드 검증은 Yup을 사용하는데 입력 요소를 검증하는 또 다른 방법이 있다. 즉, Yup에서 모드를 설명하고 이를 Formik 구성 요소에 간단하게 분배하는 것이다

비동기식 검증

내장 구성 요소, 일부 Formiks 내장 구성 요소 사용

리소스

나는 이미 이 두 문장을 위해 환매를 했기 때문에 만약 당신이 곤경에 빠진다면 이곳을 보십시오Form demo repo

내장 구성 요소

지금까지 우리는 form, input 등 일반적인 HTML 요소를 사용하여 우리의 form, onSubmit, onChange, onBlur 등 사건에 연결했다.하지만 사실 우리는 타자를 적게 칠 수 있다.다음 구성 요소에 문의하십시오.

형식, 이것은 정상form 원소

를 대체할 것이다

필드, 이것은 모든 유형의 input 요소

를 대체합니다

ErrorMessage, 이것은 당신이 가지고 있는 모든 컨트롤을 대체할 수는 없지만, 속성name이 오류 메시지를 표시할 수 있기 때문에 아주 좋은 구성 요소입니다.

먼저 간단한 양식을 살펴보고 위의 구성 요소를 사용하여 다시 작성합니다.

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

const FormikExample = () => (
  <Formik
    initialValues={{ name: '' }}
    validation={values => {
      let errors = {};
      if(!values.name) {
        errors.name = 'Name is required';
      }
      return errors;
    }}
    onSubmit={values ={
      console.log('submitted');
    }}
  >
  {({ handleSubmit, handleChange, values, errors }) => (
   <form onSubmit={handleSubmit}>
    <input name="name" onChange={handleChange} value={values.name} />
    {errors.name && 
    <span>{errors.name}</span>
    }
   </form>
  )
  }
  </Formik>
)

자, 위에서 우리는 가장 작은 실현이 어떤 고전적인 방식으로 보이는지 보았다. 즉, HTML 요소, 예를 들어 form와input를 사용하는 것이다.
이제 Formiks 내장 컨트롤을 사용하여 이 문제를 정리합니다.

import { Formik, Form, Field, ErrorMessage } from 'formik';
import React from 'react';


const FormikExample = () => (
  <Formik
    initialValues={{ name: '' }}
    validation={values => {
      let errors = {};
      if(!values.name) {
        errors.name = 'Name is required';
      }
      return errors;
    }}
    onSubmit={values ={
      console.log('submitted');
    }}
  >
  {({ handleSubmit, errors }) => (
   <Form onSubmit={handleSubmit}>
    <Field type="text" name="name" />
    <ErrorMessage name="name"/>
    }
   </Form>
  )
  }
  </Formik>
)

기억에 남지 않나요?더 이상 입력할 필요가 없는 내용을 보여 줍니다.

onChange마다input원소

에서 사라짐

input컴포넌트를 Field컴포넌트로 교체

form컴포넌트를 Form컴포넌트로 교체

조건{errors.name &&이 사라지고 ErrorMessage 분량이 이 자리를 책임진다

아직 부족해?만약 네가 10개의 필드가 있다면, 적어도 10줄의 코드가 사라진다면, 통상적으로 더욱 깨끗해 보일 것이다.이제 함수 validation() 를 schema 로 바꿀 수 있습니다.

Yup을 사용하여 패턴 검증

알겠습니다. 내장 컨트롤러Form, Field, ErrorMessage, validation를 사용하여 표시를 진정으로 정리하는 방법을 소개했습니다.다음 단계는 validationSchema 속성을 firstName 속성으로 바꾸어 더욱 개선하는 것이다.이를 위해서는 라이브러리 Yup을 사용하여 패턴을 정의해야 합니다.그러면 패턴은 어떤 모습일까요?

import * as Yup from 'yup'

const schema = Yup.object().shape({
    firstName: Yup.string()
      .min(2, 'Too Short!')
      .max(50, 'Too Long!')
      .required('Required'),
    lastName: Yup.string()
      .min(2, 'Too Short!')
      .max(50, 'Too Long!')
      .required('Required'),
    email: Yup.string()
      .email('Invalid email')
      .required('Required'),
  });

상기 모델은 세 개의 서로 다른 필드lastName, email, if를 정의하고 이를 따라야 할 각 속성을 제공한다.

firstName, 최소 2자와 최대 50자로 구성된 문자열일 뿐만 아니라 필수입니다

lastName, 이것은 같은 최소/최대 요구 사항을 가진 문자열이자 필수입니다

전자 우편, 이것은 단지 필요한 문자열일 뿐이다

보시다시피 위의 내용은 매우 읽을 수 있습니다. 이렇게 데이터를 정의하면 대량Formik 구조를 입력하여 모든 속성이 충족되는지 확인할 필요가 없습니다.
다음과 같이 요소에 사용됩니다.

<Formik validationSchema={schema}>

이렇게 하면 이것이 진정으로 표현력이 풍부한 방식으로 표 데이터에 필요한 모든 내용을 정의하는 것이다. 이것은 당신에게 따뜻하고 모호한 느낌을 주지 않겠는가?:)

비동기식 검증

자, 이제 마지막 주제, 비동기 검증을 보겠습니다.그럼 상황은 뭐예요?응, 때때로 너는 약간의 데이터가 있는데, 클라이언트가 입력한 값이 정확한지 아닌지를 진정으로 판단할 수 없다.어떤 회사나 웹 페이지가 점용되었는지 알고 싶은 표가 있습니다.이 점에서, 당신은 단점을 호출해야 할 수도 있고, 단점은 즉시 답안을 되돌려 주지 않을 수도 있습니다.
좋습니다. 우리는 이미 장면을 설정했습니다. 우리는 어떻게 Formik에서 이 문제를 해결합니까?응, validation 재산도 승낙할 수 있어.진짜예요?그렇게 간단해?그래, 내가 보기에 이 해결 방안은 좀 정통적이지 않다. 내가 너에게 내 뜻을 알려줄게.

<Formik
  validate={values => {
    console.log('validating async');
    let errors = {};
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        errors.companyName = 'not cool';
        resolve('done');
      },3000);
      }).then(() => {
        if(Object.keys(errors).length) {
          throw errors;
        }
      });
    }}
>
// define the rest here
</Formik>

우리의 validate 실현을 보면, 우리는 내부에서 하나의 setTimout 를 실행하여 그것이 시간이 걸려야 답을 얻을 수 있는 단점에 도달하는 것을 모의하는 약속을 만들었다.여기서 aerrors.companyName를 잘못된 텍스트로 설정합니다.

setTimeout(() => {
  errors.companyName = 'not cool';
  resolve('done');
},3000);

더 진실한 장면에서 우리는 함수를 호출할 수 있고 함수의 답안에 따라 우리는 분배할 수 있다errors.companyName.나는 아래에서 너에게 나의 뜻을 알려줄 것이다.

isCompanyNameUnique(values.companyName).then(isUnique => {
  if(!isUnique) {
    errors.companyName = `companyName is not unique, please select another one`
  }
  resolve('done')
})

코드에서 발생하는 다음 일은 우리가 호출할 때then()입니다. 이것은 우리가 호출할 때 발생합니다.여기에서 매우 재미있는 일이 발생했습니다. 우리는 resolve() 설정할 수 있는 속성이 있는지 검사합니다. 만약 그렇다면, 우리는 errors 대상을 매개 변수로 오류를 던졌습니다. 아래와 같습니다.

.then(() => {
  if(Object.keys(errors).length) {
    throw errors;
  }
});

나는 네가 어떤지 모르겠지만, 나에게는 이것이 좀 이상하게 보인다.나는 본래 errors에 약속을 제공하는 것은 validation의 약속이 더욱 직관적인 방식이 될 것이라고 생각했다. 예를 들어

// this to me would have been more intuitive, but observe, this is NOT how it works, so DONT copy this text but refer to the above code instead

validation={ values => 
  console.log('validating async');
  let errors = {};
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      errors.companyName = 'not cool';
      reject(errors);
    },3000);
  })
}}

필드 수준 비동기식

지금까지 우리는 폼 단계에서 어떻게 비동기적인 검증을 하는지 보여 주었지만, 생각해 보시면, 정말 이렇게 하시겠습니까?가장 가능성이 있는 경우, 클라이언트에서 검증할 수 있는 혼합 필드가 있고, 소수의 필드만 비동기적으로 검증해야 합니다.이런 상황에서 모든 필드에 대한 응용 검증은 의미가 있다.이것은 다음과 같은 방식으로 쉽게 실현될 수 있다.

<Field name="username" validate={this.validate} >

필드에서 비동기식 검증을 하는 것이 최선의 방법일 수 있습니다.다른 필드에 대해서는 클라이언트를 검증할 수 있습니다. reject() 구성 요소 Formik 에서 이 필드를 정의하고 validationSchema 모드를 사용하는 것이 좋습니다.

주의사항

만약 우리가 비동기적인 검증을 가지고 있다면, 당신의 검증이 너무 자주 실행되지 않을 것을 확인하십시오. 특히 검증에 시간이 필요한 상황에서.키를 입력할 때마다 3초의 인증을 터치하지 않기를 원하지 않습니다. 사용자가 다른 필드에서 입력을 시작할 때 터치합니다. 이를 Yup 이벤트라고 합니다.따라서 blur 구성 요소 설정은 다음과 같습니다.

<Formik
  validateOnBlur={true} 
  validateOnChange={false} >

이것이 바로 당신이 원하는 것입니다. Formik 를 validateOnBlur 로 설정하는 것이 바로 당신이 원하는 것입니다. 기술적으로는 기본적으로 이것은 true 입니다.하지만 다음 문제를 명확히 하고 싶다true.닫거나 (으)로 설정하십시오.

총결산

우리는 내장 구성 요소, 예를 들어 validateOnChange, false, Form에 대해 토론하기 시작했는데, 최종 결과는 우리가 대량의 코드를 정리한 것이다.
이 밖에 우리는 Field 라이브러리 정의 모델을 사용하여 검증 함수에서 벗어나는 방법을 보여 주었다.
마지막으로 우리는 비동기 검증을 토론했고 고려해야 할 사항을 토론했다. 예를 들어 언제 검증하는지, 표의 소수의 비동기 필드에 대해 필드급 검증을 하고 나머지 필드에 대해 패턴 검증을 하는 것이 가장 좋다.
이렇게 해서 우리의 문장은 여기서 끝난다.나는 이 부분과 앞부분이 너에게 새로운 희망을 주었으면 좋겠다. React에서 폼을 처리하는 데 그렇게 고통스러울 필요가 없다