Fielder V2의 새로운 기능

Fielder의 Anew major release가 지금 라이브 중입니다🚀🎉

이 최신 릴리스는 양식 디자인을 탐구하는 수많은 시간의 결과입니다. 새로운 기능이 있습니다!

우리가 여기까지 온 방법

Fielder의 목표는 기존 양식 라이브러리 제약 조건에서 벗어나는 양식 라이브러리를 만드는 것이었습니다.

모놀리식 유효성 검사 스키마의 경직성을 제거하고 Fielder는 유효성 검사를 양식이 아닌 필드에 결합하여 양식에 대한 더 간단한 솔루션을 제시했습니다.

const [fieldProps, fieldMeta] = useField({
  name: "username",
  validate: useCallback((value) => {
    if (!value) {
      throw Error("Username is required!");
    }
  }, []),
});

Fielder V1의 필드 우선 검증 예

이러한 접근 방식의 변화는 시간이 지남에 따라 진화할 수 있는 간단하고 유연한 형식을 만드는 데 효과적인 것으로 입증되었습니다(with exception).

이것은latest release 이 만트라를 보완하여 진화적이고 적응적인 형태 디자인에 계속 초점을 맞춥니다.

새로운 기능

버그 수정 및 최적화와 함께 이 릴리스에는 다음과 같은 두 가지 주요 기능이 포함되어 있습니다.

유효성 검사를 훨씬 더 유연하게 만듭니다.

사용자 생성 양식 상태에 대한 필요성 제거

검증 이벤트

Validation events은 유효성 검사가 발생하는 시점과 주어진 이벤트에 대해 어떤 유효성 검사 로직이 실행되는지 지정을 단순화하는 Fielder에 새로 추가되었습니다.

const usernameValidation = ({ value, trigger }) => {
  // Event agnostic validation (sync)
  if (!value) {
    throw Error("Username is required");
  }

  // Validation on submit (async)
  if (trigger == "submit") {
    return isUsernameTaken(value).then((taken) => {
      if (taken) {
        throw Error("Username is already taken");
      }
    });
  }
};

위의 예에서 submit 와 같은 유효성 검사 이벤트에 대해서만 더 비싼 비동기 유효성 검사를 실행할 수 있음을 알 수 있습니다.

제출

새로운 유효성 검사 이벤트를 보완하기 위해 양식에서 완료 및 진행에 사용할 수 있는 새로운useSubmit 후크가 있습니다.

See the new submission guide in the docs

const { isValidating, hasSubmitted, handleSubmit } = useSubmit(() => {
  console.log("Submit validation succeeded!");
});

handleSubmit(); // Trigger submission

유효성 검사가 완료될 때까지 제출 논리가 호출되지 않도록 보호하는 handleSubmit 함수를 반환합니다.

비동기submit 유효성 검사( isValidating ) 상태를 추적하고 handleSubmit 함수가 호출되었는지 여부를 추적하기 위한 추가 상태( hasSubmitted )도 있습니다.

유효성 검사 이벤트와 결합된 이 후크는 자체 상태를 도입할 필요 없이 복잡한 제출별 유효성 검사를 수행하는 데 필요한 모든 도구를 제공합니다.

const usernameValidation = ({ value, trigger }) => {
  if (!value) {
    throw Error("Username is required");
  }

  if (trigger == "submit") {
    return isUsernameTaken(value).then(taken => {
      if (taken) {
        throw Error("Username is already taken");
      }
    })
  }
}

const Form = () => {
  const [usernameProps, usernameMeta] = useField({
    name: 'username',
    initialValue: '',
    validate: usernameValidation  
  });

  const { isValidating, hasSubmitted, handleSubmit } = useSubmit((values) => {
    fetch('/submit-form', {
      method: 'POST',
      body: JSON.stringify(values),
    });
  });

  return (
    <div>
      <input type="text" {...usernameProps} />
      <button onClick={handleSubmit}>
        {isValidating ? <Spinner /> : "Submit"}
      </button>
    </div>
  );
}

시작하다

처음이시거나 업데이트를 원하신다면 docs site로 이동하여 시작하고 새로운 live examples을 확인하십시오.


바라건대, 당신이 이것을 흥미롭게 찾았습니다! 생각이나 의견이 있으시면 언제든지 아래에 드롭하거나 트위터에서 저를 누르십시오 -

면책 조항: 이 기사에 표현된 모든 생각과 의견은 저만의 것입니다.