제출 처리

submit은 편집과 부수 효과 사이의 경계로 다루세요. 검증을 실행하고 submitCount를 증가시키며, 검증된 값으로만 onValid를 호출합니다. onInvalid는 포커스 이동, 오류 요약, 관찰 로그에 사용할 수 있습니다.

await form.submit(
  async (values) => {
    const result = await save(values);
    if (!result.ok) {
      form.setErrors('email', [{ type: 'server', message: result.message }]);
      return;
    }
    form.reset(result.values);
  },
  () => {
    form.focus('email');
  },
);

이 조각은 첫 번째 필수 필드가 email인 폼을 전제로 합니다. invalid-fields 기록의 내부 키를 focus()에 다시 넘기지 말고 알고 있는 공개 필드 경로에 포커스하세요. 서버 오류는 원격 상태에 의존하므로 보통 스키마 오류가 아닙니다. setErrors로 추가하고, clearErrors로 지우며, useFormState()의 isSubmitting이 true인 동안 제출 버튼을 비활성화하는 것을 고려하세요.

점검 목록

배포 전에는 라벨과 접근성 속성이 마크업에 있는지, 스키마 오류가 필드 주변과 필요한 요약 영역에 표시되는지, 중첩 값에 튜플 경로를 쓰는지, 동적 목록 구조 변경이 배열 명령으로만 일어나는지 확인하세요. 이렇게 해야 제품 요구가 커져도 폼 동작을 예측하기 쉽습니다.