如何在React Hook Form中实现联动MUI Autocomplete组件的完全重置？

我之前也碰到过一模一样的问题，太懂你想要的那种“完全回到初始状态”的感觉了——就是连那个清除用的X按钮都消失，输入框干干净净的对吧？放心，这个绝对可行，给你分享几个亲测有效的解决办法：

核心思路：正确结合React Hook Form与MUI Autocomplete的状态管理 #

首先要确认你是用Controller组件来集成MUI Autocomplete和React Hook Form的（直接用register会有很多状态同步问题），这是基础。接下来分两种情况处理：

1. 基础方案：用setValue传null实现重置

你之前传{label: '', value: ''}出现警告，是因为这个对象不在你的选项列表里，MUI Autocomplete默认会校验选中值是否属于选项集合，所以null才是合法的“无选中”状态。

代码示例参考：

import { Controller, useForm, useWatch } from "react-hook-form";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import { useEffect } from "react";

function YourForm() {
  const { control, setValue } = useForm({
    defaultValues: {
      firstAuto: null,
      secondAuto: null
    }
  });

  // 监听第一个Autocomplete的选中值
  const firstSelected = useWatch({ control, name: "firstAuto" });

  // 第一个值变化时，重置第二个组件
  useEffect(() => {
    if (firstSelected) {
      // 重置RHF表单字段为null
      setValue("secondAuto", null);
      // 如果你的第二个组件选项是动态获取的，这里可以先清空选项列表
      // setSecondOptions([]);
    }
  }, [firstSelected, setValue]);

  return (
    <div style={{ display: "flex", gap: "20px", padding: "20px" }}>
      <Controller
        name="firstAuto"
        control={control}
        render={({ field }) => (
          <Autocomplete
            {...field}
            options={yourFirstOptionsList}
            getOptionLabel={(opt) => opt.label}
            isClearable
            renderInput={(params) => (
              <TextField {...params} label="第一个选择项" />
            )}
            onChange={(_, selectedOpt) => field.onChange(selectedOpt)}
          />
        )}
      />

      <Controller
        name="secondAuto"
        control={control}
        render={({ field }) => (
          <Autocomplete
            {...field}
            options={yourSecondOptionsList} // 基于firstSelected动态生成
            getOptionLabel={(opt) => opt.label}
            isClearable
            disabled={!firstSelected} // 可选：没选第一个时禁用第二个
            renderInput={(params) => (
              <TextField {...params} label="第二个选择项" />
            )}
            onChange={(_, selectedOpt) => field.onChange(selectedOpt)}
          />
        )}
      />
    </div>
  );
}

这个方案里，setValue("secondAuto", null)会同步更新RHF的表单状态，同时通过Controller把状态传递给Autocomplete，让它回到初始的未选中状态。

2. 兜底方案：手动调用Autocomplete的clear()方法

如果上面的方法还是没完全清除（比如输入框里还有残留的文字），那可以用useRef获取Autocomplete的实例，手动触发清除操作，这和点击X按钮的效果完全一致：

// 在组件内添加ref
const secondAutoRef = useRef(null);

// 然后在重置的useEffect里新增一行：
useEffect(() => {
  if (firstSelected) {
    setValue("secondAuto", null);
    // 强制调用组件内部的清除方法
    secondAutoRef.current?.clear();
  }
}, [firstSelected, setValue]);

// 给第二个Autocomplete加上ref属性
<Autocomplete
  ref={secondAutoRef}
  // ...其他属性不变
/>

额外注意点 #

• 如果你的第二个组件的选项是异步获取的（比如根据第一个选中值调接口），一定要在重置时先清空选项列表，再设置secondAuto为null，避免旧选项残留导致的状态异常。
• 确保getOptionLabel方法的逻辑正确，它是MUI Autocomplete识别选项的关键，不能出错。

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