javascript - ล้างค่าของ MUI Select โดยใช้ react-hook-form

ฉันมีเมนูแบบเลื่อนลงที่ผู้ใช้สามารถเลือกจาก "รายการ 1", "รายการ 2" และ "รายการ 3" นอกจากนี้ยังมีปุ่ม "รีเซ็ต" ที่ให้ผู้ใช้ลบการเลือกของตนเพื่อทำการเลือกใหม่

นี่คือโค้ดของฉัน :

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>
  );
}

ฉันคาดว่า resetField จะล้างการเลือกของเมนูแบบเลื่อนลงเมื่อคลิกปุ่มรีเซ็ต และมันก็ทำเช่นนั้น แต่เฉพาะในสถานะของฟอร์ม (และการแสดงผล ไม่ เปลี่ยนแปลง) ฉันสมมติว่ามีบางอย่างเกี่ยวกับ control ที่ฉันไม่เข้าใจอย่างถ่องแท้ แต่หลังจากใช้เวลาหนึ่งบ่ายในการค้นหาก็ไม่พบคำตอบ

ฉันก็ลองใช้ setValue แทน resetField แล้ว แต่ก็ไม่เป็นผล

ลิงก์: https://codesandbox.io/s/blue-platform-74tgg8?file=/src/App.js

ฉันกำลังพลาดอะไรอยู่ไหม? ขอบคุณสำหรับความช่วยเหลือ :)

แก้ไข: ในกรณีการใช้งานของฉัน นี่เป็นส่วนหนึ่งของฟอร์มที่ใหญ่กว่า ดังนั้นการใช้ reset เพื่อรีเซ็ตฟิลด์ทั้งหมดจึงใช้ไม่ได้สำหรับฉัน

คำตอบ #1

การแก้ไขปัญหาการล้างค่าของ MUI Select ด้วย React Hook Form

ปัญหาทั่วไปที่นักพัฒนาที่ทำงานกับ React และ Material-UI (MUI) Select components ประสบ โดยเฉพาะเมื่อรวมเข้ากับ React Hook Form ปัญหาที่เกิดขึ้นเกี่ยวข้องกับการล้างค่าของ dropdown ที่ขึ้นอยู่กับอีก dropdown หนึ่ง โดยเฉพาะเมื่อการเลือกใน dropdown หนึ่งควรรีเซ็ตค่าของ dropdown อื่นและแสดงให้ว่างใน UI

อย่าลืมตั้งค่ามาตรฐานใน useForm hook ของฟิลด์ที่คุณกำลังจะรีเซ็ต

 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>