javascript - Vyčistiť hodnotu MUI Select pomocou react-hook-form

Mám rozbaľovacie menu, kde si používateľ môže vybrať medzi „Položka 1“, „Položka 2“ a „Položka 3“. Je tu tiež tlačidlo „Resetovať“, ktoré používateľovi umožňuje vymazať svoj výber a urobiť nový.

Tu je môj kód :

import React from "react";
import { Button, FormControl, MenuItem, Select } from "@mui/material";
import { Controller, useForm, FormProvider } from "react-hook-form";

export default function App() {
  const methods = useForm();
  const { control, resetField } = methods;
  const dropDownItems = ["Item 1", "Item 2", "Item 3"];

  return (
    <FormProvider {...methods}>
      <form>
        <FormControl sx={{ width: "51%" }}>
          <Controller
            name="firstItem"
            control={control}
            rules={{ required: true }}
            render={({ field }) => (
              <Select {...field} id="firstItem">
                {dropDownItems.map((name) => (
                  <MenuItem key={name} value={name}>
                    {name}
                  </MenuItem>
                ))}
              </Select>
            )}
          />
        </FormControl>
      </form>
      <Button onClick={() => resetField("firstItem")}>Reset</Button>
    </FormProvider>
  );
}

Očakávam, že resetField vyprázdni výber rozbaľovacieho zoznamu po kliknutí na tlačidlo reset. A tak to aj robí, ale iba v stave formulára (a zobrazenie sa nezmení). Predpokladám, že je niečo ohľadom control, čomu úplne nerozumiem, ale popoludnie hľadania mi nepomohlo nájsť odpoveď.

Skúšal som tiež použiť setValue namiesto resetField, ale bez úspechu.

Odkaz: https://codesandbox.io/s/blue-platform-74tgg8?file=/src/App.js

Čo mi chýba? Ďakujem za pomoc :)

Úprava: V mojom prípade použitia je toto súčasťou väčšieho formulára, takže použitie reset na úplné obnovenie polí pre mňa nefunguje.

Odpoveď č. 1

Riešenie problému vymazania hodnoty MUI Select pomocou React Hook Form

bežný problém, s ktorým sa stretávajú vývojári pracujúci s komponentmi React a Material-UI (MUI) Select, najmä pri ich integrácii s React Hook Form. Problém spočíva v vymazávaní hodnôt v scenári závislého rozbaľovacieho zoznamu, konkrétne keď výber v jednom rozbaľovacom zozname by mal resetovať hodnotu iného rozbaľovacieho zoznamu a zobraziť ju ako prázdnu v používateľskom rozhraní.

Nezabudnite nastaviť predvolené hodnoty vo hooku useForm pre polia, ktoré plánujete resetovať.

 const {
    register,
    handleSubmit,
    watch,
    control,
    trigger,
    setValue,
    formState: { errors },
    resetField,
  } = useForm({ defaultValues: { installmentDay: "" } }); 
const frequency = watch("frequency");
const [installmentDay, setInstallmentDay] = useState(watch("installmentDay"));
  <Select
    name="Frequency"
    required
    value={frequency}
    {...register("frequency", {
      required: "required.",
    })}
    onChange={(e) => {
      setInstallmentDay("");
      resetField("installmentDay");
      //setValue("installmentDay", "");
      setValue("frequency", e.target.value);
      trigger("frequency");
    }}
    defaultValue={""}
  >
    {getfrequency.map((val, index) => {
      return (
        <MenuItem
          value={val.code}
          key={val.code}
        >
          {val.value}
        </MenuItem>
      );
    })}
  </Select>

  <Select
    name="installmentDay"
    required
    value={installmentDay}
    disabled={frequency ? false : true}
    {...register("installmentDay", {
      // required: true,
      required: "required",
    })}
    onChange={(e) => {
      setValue("installmentDay", e.target.value);
      trigger("installmentDay");
      setInstallmentDay(e.target.value);
    }}
  >
    {validator?.sys_dates.trim().split("").length <= 0
      ? getInstallmentDay()?.map((day, index) => {
          return <MenuItem value={index + 1}>{day}</MenuItem>;
        })
      : validator?.sys_dates?.split("/").map((day, index) => {
          return <MenuItem value={day}>{day}</MenuItem>;
        })}
  </Select>