React 양식 개요

    React의 Form 구성 요소는 모든 애플리케이션의 요구 사항에 맞는 문의 양식 및/또는 등록 페이지를 설정하는 데 사용됩니다. React 양식 유효성 검사를 쉽게 제공하고, 양식 방향을 정의하고, 원하는 레이아웃을 구성하거나 사용자 정의할 수도 있습니다. React 양식 구성 요소는 사용자 작업에 응답할 수 있는 기회를 제공하는 이벤트도 노출합니다.

    React Form Example

    다음 예는 내부에 일부 입력, 버튼 및 확인란이 있는 IgrForm 나타냅니다.

    Usage

    먼저 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그런 다음 다음과 같이 필요한 CSS인 IgrForm 가져오고 해당 모듈을 등록해야 합니다.

    import { IgrFormModule, IgrForm } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrFormModule.register();

    ​IgrForm 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

    양식 데이터는 다음 구성요소에 대해 수집됩니다.

    양식 컨트롤이 유효하지 않으면 양식이 제출되지 않고 오류 메시지가 표시됩니다. 양식을 제출할 때 양식 요소의 유효성을 검사하지 않도록 지정하려면 novalidate ~에 귀속시키다 IgrForm 요소:

    <IgrForm novalidate="true"></IgrForm>

    이벤트

    Form 구성 요소는 다음 이벤트를 발생시킵니다.

    • 제출 - 양식이 제출될 때 발생합니다.
    • 재설정 - 양식이 재설정될 때 발생합니다.

    다음은 Submit 이벤트에 대한 이벤트 리스너를 추가하는 방법을 보여주는 예입니다.

    document.addEventListener('igcSubmit', function (event) {
  const customEvent = event as CustomEvent<FormData>;
  console.log(customEvent.detail);
});

    Methods

    Form 구성 요소는 다음 메서드를 노출합니다.

    방법 설명
    Submit 양식 데이터를 제출합니다.
    Reset 양식 데이터를 재설정합니다.
    GetFormData 양식 데이터를 수집하고 단일 FormData 개체를 반환합니다.
    reportValidity 요소의 하위 컨트롤이 유효성 검사 제약 조건을 충족하는지 여부를 반환합니다.

    API References

    Additional Resources