양식 처리가 그 어느 때보다 쉬워졌습니다 | 만타인 양식

mantine 사용 양식으로 양식 처리

얼마 전에 프로젝트에서 작업할 때 친구가 새로운 React 기반 클라이언트 프로젝트에서 사용할 좋은 라이브러리를 찾고 있었습니다. 프로젝트와 그는 바로 그 자리에서 우리의 구세주였던 Mantine Library를 우연히 발견했습니다.

사용 양식 사용

Mantine에서 use-form을 시작하려면 먼저 package.json에 use-form을 설치해야 합니다. @mantine/form은 다른 라이브러리에 의존하지 않으므로 독립 실행형 패키지로 사용할 수 있습니다.
npm install @mantine/form

또는

yarn add @mantine/form
그런 다음 @mantine/form을 바로 사용할 수 있습니다!

시작하려면 @mantine/form에서 useform을 JS 파일로 가져와야 합니다.

import { useForm } from '@mantine/form';

변수를 선언하고 아래 예제와 같이 useform으로 초기화할 수 있습니다.

const dog = useForm({
    initialValues: {
      name: '',
      breed: '',
      age: 0,
    },
  });

가치 접근

<div>
  <h2>{dog.name}</h2>
</div>

양식 값 설정

useForm에서 setFieldValue를 사용하여 양식 값을 설정할 수 있습니다.

<form>
 <label htmlFor="name">Name</label>
 <inputs 
  type="text"
  value={dog.values.name}
  onChange={(event) =>
  dog.setFieldValue('name',event.currentTarget.value)}
  />
</form>

양식 값 재설정

Useform에는 전체 양식 값을 재설정하기 위해 호출할 수 있는 재설정 API가 있습니다.

<button type="reset" onClick={dog.reset}>Reset Form Value </button>

양식 유효성 검사

initialValues와 함께 유효성 검사를 제공하여 양식을 쉽게 유효성 검사할 수도 있습니다. 유효성을 검사하려면 아래와 같이 useForm에서 유효성 검사 API를 호출해야 합니다.

const dog = useForm({
    initialValues: {
      name: '',
      breed: '',
      age: 0,
    },
    validate: {
      name: (value) => (value !== null ? null : notify("Name can't be empty")),
      breed: (value) =>
        value !== null ? null : notify("Breed can't be empty"),
      age: (value) => (value > 0 ? null : notify('Age must be greater than 0')),
    },
  });

검증 기능

const submit = () => {
    //Before submitting, you can check if form is valid
    if (dog.isValid) {
      //Submit form
    } 
    //Or the other way
    const validated = dog.validate();
    if (validated) {
      validated.errors; //Object with errors
      //Submit form
    }
  };

결론

전반적으로 내 개인적인 의견으로는 Mantine의 useForm이 정말 사용하기 쉽고 초보자에게 친숙하기 때문에 정말 마음에 듭니다. 여기보다 더 많은 문서가 있으므로 Mantine의 문서를 확인하는 것이 좋습니다. 이 기사가 Mantine 라이브러리를 확인하는 데 관심을 갖게 되기를 바랍니다!