React Hook Form

Esimerkkejä KDS-komponenttien yhdistämisestä React Hook Form -kirjastoon.

Yleistä

Tähän osioon on koottu esimerkkejä KDS:n lomakekomponenttien yhdistämisestä React Hook Form(Avautuu uuteen välilehteen) -kirjastoon.

Yksinkertaiset komponentit

Yksinkertaiset HTML:n natiivielementtejä (input, select ja textarea) hyödyntävät lomakekomponentit voidaan liittää React Hook Formiin helposti käyttämällä register(Avautuu uuteen välilehteen)-funktiota.

Tämä edellyttää, että komponentti tukee defaultValue- ja ref-proppeja, sekä standardin mukaisia onChange- ja onBlur-proppeja.

Näitä komponentteja ovat:

TextInput

Alla on esimerkki TextInput-komponentista. Muut yksinkertaiset lomakekomponentit toimivat vastaavasti.

<TextInput
  defaultValue={data.streetAddress}
  errorText={errors?.streetAddress?.message}
  invalid={!!errors.streetAddress}
  labelText="Katuosoite"
  required
  requiredLabel="Pakollinen tieto"
  {...register("streetAddress", {
    required: "Vastaus puuttuu.",
    maxLength: {
      value: 50,
      message: "Korjaa vastaus. Vastaus saa olla enintään 50 merkkiä pitkä.",
    },
  })}
/>

Monimutkaiset komponentit

Monimutkaiset lomakekomponentit käyttävät sisäistä tilanhallintaa, eivätkä päivity suoraan input-kentän ref:n kautta, joten ne tarvitsevat React Hook Formin Controller-komponentin(Avautuu uuteen välilehteen) toimiakseen.

Näitä komponentteja ovat:

Controllerin import:

import { Controller } from "react-hook-form";

ComboboxV2

Esimerkki näyttää, miten ComboboxV2 integroidaan React Hook Formiin.

function ControlledComboboxV2() {
  return (
    <Controller
      name="postOffice"
      control={control}
      rules={{
        required: "Vastaus puuttuu.",
        maxLength: {
          value: 50,
          message: "Korjaa vastaus. Vastaus saa olla enintään 50 merkkiä pitkä.",
        },
      }}
      render={({ field: { onBlur, onChange, ref, value }, fieldState: { error, invalid } }) => (
        <ComboboxV2
          a11yOptions={{
            selectedLabel: "Valittu postitoimipaikka:",
          }}
          errorText={error?.message}
          invalid={invalid}
          labelText="Postitoimipaikka"
          onBlur={onBlur}
          onChange={onChange}
          onSelect={(value) => {
            onChange(value);
            onBlur();
          }}
          ref={ref}
          required
          requiredLabel="Pakollinen tieto"
          startsWith
          threshold={1}
          value={value}
        >
          <ComboboxV2Menu>
            {postOffices.map((postOffice) => (
              <ComboboxV2MenuOption key={postOffice} value={postOffice} />
            ))}
          </ComboboxV2Menu>
        </ComboboxV2>
      )}
    />
  );
}

DatePickerV2

Esimerkki näyttää, miten DatePickerV2 integroidaan React Hook Formiin.

Päivämäärä validoidaan komponentin useDateValidator-hookilla, joka tarjoaa valmiit säännöt komponentin tukemille propeille.
Päivämäärä tallennetaan Date-muotoisena arvona erilliseen _fromDate-kenttään, jotta sitä voi käsitellä helpommin myöhemmin.

function ControlledDatePickerV2() {
  const dateValidationParams: DateValidatorParams = {
    required: true,
    fromDate: new Date(),
  };

  const { validate } = useDateValidator(dateValidationParams);

  return (
    <Controller
      name="fromDate"
      control={control}
      rules={{
        validate(value) {
          const validationResult = validate(value);
          return validationResult.isValid || validationResult.error.message;
        },
      }}
      render={({ field: { onBlur, onChange, ref, value }, fieldState: { error, invalid } }) => (
        <DatePickerV2
          errorText={error?.message}
          invalid={invalid}
          labelText="Päivämäärä"
          onBlur={onBlur}
          onChange={(dateValue, validity) => {
            setValue("_fromDate", validity?.valueAsDate);
            onChange(dateValue);
          }}
          onSelect={(dateValue, validity) => {
            setValue("_fromDate", validity?.valueAsDate);
            onChange(dateValue);
            onBlur();
          }}
          ref={ref}
          requiredLabel="Pakollinen tieto"
          value={value}
          {...dateValidationParams}
        />
      )}
    />
  );
}