Ionic React 구성 요소와 함께 React Hook 형식 사용

see updated post example for using v6+ -

설정react-hook-form은 매우 간단합니다. 라이브러리를 가져오고 기본값으로 사용자 지정 후크를 정의 및 초기화하여 시작합니다.

Not going to cover too much of the basics since there is extensive documentation provided on the library's website: Getting Started

// the import
import { useForm, Controller } from "react-hook-form";

// set the default values for the controls
let initialValues = {
  rangeInfo: -100,
  fullName: "",
  gender: "",
  techCos: "",
  email: ""
};


const App () => {
  const { control, register, handleSubmit, errors, formState } = useForm({
    defaultValues: initialValues
  });
  return (<div></div>)
}

그런 다음 양식이 제출될 때 호출되는 onSubmit 함수가 있습니다. 이 함수를 양식의 값에 대한 방법으로 사용합니다. 마지막으로 useState를 사용하여 로컬에서 상태를 관리합니다. 로컬 상태 정보를 변수data에 저장하고 있습니다.

// the import
import { useForm, Controller } from "react-hook-form";

const App () => {
  const { control, register, handleSubmit, errors, formState } = useForm({
    defaultValues: initialValues
  });

  const [data, setData] = useState();

  const onSubmit = data => {
    alert(JSON.stringify(data, null, 2));
    setData(data);
  };

  return (<div></div>)
}

다음으로 애플리케이션에서 사용할 양식을 설정합니다. 형식에서 onSubmit 함수의 사용에 유의하십시오.

I have excluded a lot of the Ionic components for setting up the page, the header and such but they are included in the project and sample code provided at the end of the post

// the import
import { useForm, Controller } from "react-hook-form";


const App () => {
  const { control, register, handleSubmit, errors, formState } = useForm({
    defaultValues: initialValues
  });

  const [data, setData] = useState();

  const onSubmit = data => {
    alert(JSON.stringify(data, null, 2));
    setData(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} >
    {/* here is where the Ionic Components will go /*}
    </form>
  )
}

대부분의 Ionic Framework 구성 요소 기본 기능은 제대로 작동하고, 오류를 추적하고, 반응 애플리케이션에서 자주 볼 수 있는 모든 추가useState 상용구 코드 없이 값을 제공하지만 유효성 검사 및 오류 검사의 실질적인 이점을 얻으려면 래핑해야 합니다. Controller Component의 이온 구성 요소

컨트롤 래핑된 Ionic 구성 요소에 들어가기 전에 react-hook-form의 기본 사용부터 먼저 시작할 것입니다.

<IonItem>
  <IonLabel>Gender</IonLabel>
  <IonSelect
    placeholder="Select One"
    name="gender"
    ref={register({ required: true })}
  >
    <IonSelectOption value="FEMALE">Female</IonSelectOption>
    <IonSelectOption value="MALE">Male</IonSelectOption>
  </IonSelect>
</IonItem>
{showError("gender")}

여기에서 볼 수 있듯이 단순IonInput은 기본적으로 처리됩니다.

<IonItem>
  <IonLabel>Name</IonLabel>
  <IonInput name="name" ref={register({ required: true })}></IonInput>
</IonItem>
{showError("name")}

react-hook-form 후크에서 오류 메시지를 표시하는 간단한 오류 처리기 함수를 만들었습니다. 라이브러리는 양식의 유효성을 검사할 때 생성된 오류를 보유하는 후크의 일부로 개체를 만듭니다.

const showError = (_fieldName: string) => {
  {
    return (
      (errors as any)[_fieldName] && (
        <div
          style={{
            color: "red",
            padding: 5,
            paddingLeft: 12,
            fontSize: "smaller"
          }}
        >
          This field is required
        </div>
      )
    );
  }
};

React-Hook-Form 제어 구성 요소 사용

Controller Component을 사용해야 하는 경우의 예는 IonRange 구성 요소와 함께입니다.
IonRange 구성 요소를 사용하려면 react-hook-formcontroller 속성을 사용하고 onIonChange 이벤트를 수신하여 IonRange 구성 요소에서 적절한 값을 가져와야 합니다.
selected.detail.value 속성을 사용하여 IonRange 구성 요소에서 값을 가져오고 개체를 적절하게 설정하고 react-hook-form 후크가 거기에서 처리하도록 합니다.

<IonItem>
  <Controller
    as={
      <IonRange min={-200} max={200} color="secondary" >
        <IonLabel slot="start">-200</IonLabel>
        <IonLabel slot="end">200</IonLabel>
      </IonRange>
    }
    control={control}
    onChangeName="onIonChange"
    onChange={([selected]: any) => {
      return selected.detail.value;
    }}
    name="rangeInfo"
    rules={{ required: true }}
  />
</IonItem>

결국 라이브러리와 Ionic Framework의 웹 구성 요소에서 진정한 가치를 얻으려면 모든 것을 랩핑하는 것이 좋습니다. 필요에 따라 래핑할 특정 구성 요소를 선택하고 선택했으며 양식이 유효한지 여부를 확인하기 위해 양식의 상태를 확인하려고 할 때 올인했습니다.

컨트롤에 모든 것을 래핑

<IonItem>
  <IonLabel>Name - IonInput</IonLabel>
  <Controller
    as={IonInput}
    control={control}
    onChangeName="onIonChange"
    onChange={([selected]) => {
      console.log("fullName", selected.detail.value);
      return selected.detail.value;
    }}
    name="fullName"
    rules={{
      required: true,
      minLength: { value: 4, message: "Must be 4 chars long" }
    }}
  />
</IonItem>
{showError("fullName")} {/* USING THE showError FUNCTION */}

더 복잡한 컨트롤IonRadioGroup에서는 여기에서 재생 중인 하위 구성 요소가 있으므로 위에서 수행한 것처럼 구성 요소 이름을 래핑할 수 없습니다.

<Controller
  as={
    <IonRadioGroup>
      <IonListHeader>
        <IonLabel>
          <h1>Manufacturers</h1>
        </IonLabel>
      </IonListHeader>
      <IonItem>
        <IonLabel>Apple</IonLabel>
        <IonRadio value="apple" />
      </IonItem>
      <IonItem>
        <IonLabel>Amazon</IonLabel>
        <IonRadio value="amazon" />
      </IonItem>
      <IonItem>
        <IonLabel>Microsoft</IonLabel>
        <IonRadio value="microsoft" />
      </IonItem>
    </IonRadioGroup>
  }
  control={control}
  name="techCos"
  rules={{ required: true }}
  onChangeName="onIonChange"
  onChange={([selected]) => {
    console.log(selected.detail.value);
    return selected.detail.value;
  }}
/>
{/* we can get the error and potentially a custom message */}
{ errors.techCos && (errors.techCos.message || <span>Field Is Required</span>)}

오류 검사 및 양식 유효성 검사

양식의 내용을 확인하기 위해 formState 개체에 액세스하여 양식이 유효한지 확인할 수 있습니다. 제출 버튼을 비활성화 상태로 유지하는 데 사용할 수 있습니다.

<IonButton type="submit" disabled={formState.isValid === false}>
  submit
</IonButton>

오류를 확인하려면 오류가 확인되는 시점mode을 설정합니다...

const { control, register, handleSubmit, errors, formState } = useForm({
  defaultValues: initialValues,
  mode : 'onChange' // when the values change... check for errors
});

또는 필드가 흐려지는 경우를 확인할 수 있습니다. 자세한 내용은 react-form-hooks documentation 에서 확인할 수 있습니다.

const { control, register, handleSubmit, errors, formState } = useForm({
  defaultValues: initialValues,
  mode : 'onBlur' // when the you blur... check for errors
});

소스 코드/프로젝트/동영상

코드의 Typescript 버전은 다음과 같습니다.