如何使用react-hook-form清空MUI Select组件的选中值？

你的问题核心在于MUI Select组件需要明确的空值选项来匹配表单重置后的状态，同时react-hook-form的Controller需要正确配置默认值，才能让视图和表单状态同步。

问题原因 #

• MUI Select组件没有预设空值的MenuItem，即使通过resetField清空了表单状态，组件找不到对应值的选项，因此不会更新视图。
• Controller未配置defaultValue，导致初始状态和重置后的状态无法和组件的空状态对应。

解决方案 #

1. 添加空值选项：给Select添加一个值为undefined的MenuItem，作为未选中状态的显示项。
2. 设置Controller默认值：在Controller中指定defaultValue: undefined，让表单初始状态为未选中。
3. 完善resetField调用：调用resetField时明确传入defaultValue参数，确保重置后的值匹配空选项。

修改后的代码 #

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 }}
            defaultValue={undefined}
            render={({ field }) => (
              <Select 
                {...field} 
                id="firstItem"
                displayEmpty
              >
                {/* 新增空值选项 */}
                <MenuItem value={undefined}>请选择</MenuItem>
                {dropDownItems.map((name) => (
                  <MenuItem key={name} value={name}>
                    {name}
                  </MenuItem>
                ))}
              </Select>
            )}
          />
        </FormControl>
      </form>
      <Button onClick={() => resetField("firstItem", { defaultValue: undefined })}>Reset</Button>
    </FormProvider>
  );
}

关键说明 #

• displayEmpty属性：让MUI Select允许显示值为空的选项，否则空值选项会被隐藏。
• resetField的第二个参数：指定重置后的默认值为undefined，和空选项的值对应，确保视图同步更新。
• Controller的defaultValue：单独配置该字段的初始状态，适配大型表单局部字段的需求。

内容的提问来源于stack exchange，提问作者Yoctoboy