Formik을 사용하여 React의 양식을 처리합니다

웹 양식은 웹 사이트 및 응용 프로그램에 필수적입니다. 기본 HTML 양식은 기본 기능을 제공하지만 상태, 검증 및 제출을 관리하면 복잡해질 수 있습니다. 구성 요소 중심 접근 방식으로 React는 양식 처리를 단순화하지만 여전히 장황 코드로 이어질 수 있습니다. 가벼운 라이브러리 인 Formik은 이러한 과제를 우아하게 해결하고 상태 관리, 검증 및 제출을 단순화합니다.

이 기사는 Formik을 사용하여 React Form을 구축하여 상태, 검증 및 제출을 처리하는 기능을 보여줍니다. 기본 React 구성 요소로 시작한 다음 Formik을 통합합니다.

제어 된 반응 형태 구축

반응 구성 요소는 상태 및 소품에 의존합니다. HTML 양식 요소는 value 속성을 통해 내부 상태를 유지합니다. 이로 인해 통제되지 않은 구성 요소가됩니다. DOM은 상태를 관리합니다. 그러나 React가 상태를 관리하는 통제 된 구성 요소는 더 나은 통제력과 단일 진실의 원천을 제공합니다.

간단한 통제되지 않은 HTML 양식은 다음과 같습니다.

<div class="formRow">
  <label for="email">이메일 주소</label>
  <input type="email" id="email">
</div>
<div class="formRow">
  <label for="password">비밀번호</label>
  <input type="password" id="password">
</div>
<button type="submit">제출하다</button>

이것을 제어 된 반응 구성 요소로 변환합니다.

 함수 htmlform () {
  const [email, seteMail] = react.usestate ( "");
  const [password, setpassword] = react.usestate ( "");

  반품 (
    

이메일 주소 seteMail (e.target.value)} />

비밀번호 setpassword (e.target.value)} />

제출하다

); }

이 접근법은 양식 값에 대한 단일 진실의 소스를 제공하여 더 쉽게 검증 및 성능 최적화를 가능하게합니다.

Formik을 선택하는 이유는 무엇입니까?

React (예 : React Hook Form, Redux Form)에 대한 수많은 양식 관리 라이브러리가 존재합니다. Formik은 다음을 통해 자신을 구별합니다.

1. 선언적 접근 : 추상화는 상태, 검증 및 제출을 단순화합니다.
2. 탈출 해치 : 추상화에도 불구하고 필요할 때 제어를 제공합니다.
3. 공동 위치 : 구성 요소 내에서 형태 관련 논리를 유지합니다.
4. 적응성 : 필요한만큼 Formik을 사용하거나 거의 사용하지 않습니다.
5. 사용 편의성 : 간단하고 효과적입니다.

Formik을 양식 구성 요소에 통합합시다.

Formik 구현

기본 로그인 양식을 작성하여 세 가지 Formik 사용 방법을 탐색합니다.

1. useFormik 후크
2. 반응 컨텍스트와 함께 Formik (<formik></formik> ))
3. withFormik 고차원 구성 요소

데모에는 formik 및 yup 패키지가 필요합니다.

방법 1 : useFormik 후크

우리의 현재 형태는 비 기능적입니다. useFormik 후크는 Formik 함수 및 변수를 제공합니다. 반환 된 값을 기록하면 내용이 나타납니다.

initialValues 과 onSubmit 핸들러와 함께 useFormik 사용하겠습니다.

 // 반응 구성 요소
함수 baseformik () {
  const formik = useformik ({
    InitialValues ​​: {이메일 : "", 암호 : ""},
    onsubmit (값) {
      // 제출 로직을 양식합니다
    }
  });

  반품 (
    

{/ * 양식 요소 */}

); }

요소를 형성하기위한 결합 형태 :

 // 반응 구성 요소
함수 baseformik () {
  const formik = useformik ({
    InitialValues ​​: {이메일 : "", 암호 : ""},
    onsubmit (값) {
      // 제출 로직을 양식합니다
    }
  });

  반품 (
    

이메일 주소

{/ * ... 다른 형태의 요소 */}

); }

이것은 제출 ( onSubmit={formik.handleSubmit} ) 및 입력 상태 ( formik.getFieldProps 통한 value , onChange )를 처리합니다. 수동 상태 관리 및 이벤트 처리를 피합니다. Destructuring getFieldProps 및 handleSubmit 코드 선명도를 더욱 향상시킵니다.

그만큼<formik></formik> 구성 요소는 내장 구성 요소와 같은 추가 추상화를 제공합니다<field></field> ,,,<form></form> , 그리고<errormessage></errormessage> . 이 구성 요소는 렌더 소품 패턴을 사용합니다.

 'formik'에서 {formik, field, form} 가져 오기;

함수 formikrenderProps () {
  const initialValues ​​= {이메일 : "", 비밀번호 : ""};

  const onsubmit = (값) => {
    경고 (json.stringify (값, null, 2));
  };

  반품 (
    <formik initialvalues="{initialValues}" onsubmit="{onSubmit}">
      {() => (
        <form>
          <field classname="email formField" name="email" type="email"></field>
          {/ * ... 다른 형태의 요소 */}
        </form>
      )}
    </formik>
  );
}

Formik은 상태 및 제출을 처리합니다. 우리는 형태 구조에 중점을 둡니다.

Formik을 사용한 양식 검증

Formik은 양식 수준 ( validate 또는 validationSchema 사용), 필드 레벨 또는 수동 트리거에서 유효성 검사를 제공합니다. 양식 수준 검증은 전체 양식을 한 번에 검증합니다. validate 사용자 정의 유효성 검사 용이며 validationSchema YUP와 같은 라이브러리를 사용합니다.

validate 사용 예 :

 const formik = useformik ({
  // ...
  검증 : () => {
    const errors = {};
    if (! formik.values.email) {errors.email = "필수"; }
    // ... 기타 유효성 검사
    반환 오류;
  },
  // ...
});

Yup과 함께 validationSchema 사용하는 예 :

 const formik = useformik ({
  // ...
  validationschema : yup.object (). shape ({
    이메일 : yup.string (). email ( "유효하지 않은 이메일"). 필수 ( "필수"),
    // ... 기타 유효성 검사
  }),
  // ...
});

필드 수준 및 수동 검증도 가능합니다.

방법 3 : withFormik 고차 구성 요소

withFormik 양식 구성 요소를 감싸는 고차 컴포넌트입니다.

실제 사례

오류 메시지 표시 및 사용자 이름을 생성하는 것을 설명하겠습니다.

오류 메시지 표시

Formik은 오류 표시를 단순화합니다. errors 객체 및 표시 메시지를 확인하십시오.

<label htmlfor="email">
  이메일 주소
  {formik.touched.email && formik.errors.email}
</label>

또는 사용<errormessage></errormessage> :

<errormessage name="email"></errormessage>

사용자 이름을 생성합니다

Formik의 setValues 이메일에서 사용자 이름을 생성하는 데 사용될 수 있습니다.

 onsubmit (값) {
  formik.setValues ​​({... value, username :`@$ {values.email.split ( "@") [0]}});
}

결론

Formik은 반응 양식 처리를 크게 단순화합니다. 이 기사는 기본 사항을 다룹니다. 고급 기능 및 사용 사례에 대한 Formik의 문서를 탐색하십시오.

위 내용은 Formik을 사용하여 React의 양식을 처리합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!