MUI AutoComplete结合React Hook Form多选功能异常求助

结合你的版本（Material UI 6.1.10 + React Hook Form 7.53.2），问题出在没正确用React Hook Form的Controller组件同步AutoComplete状态，手动处理onChange会破坏组件内部选中逻辑。下面是具体解决方案：

核心思路 #

Material UI的AutoComplete属于自定义控件，不能直接用register绑定，必须通过Controller桥接表单状态与组件的value/onChange。多选场景下要确保：

• 组件value完全由React Hook Form的表单状态驱动
• onChange正确将选中的选项数组同步到表单状态
• 复选框选中状态与value保持一致

完整可复用组件示例 #

import { Controller, Control, FieldValues } from "react-hook-form";
import Autocomplete, { AutocompleteProps } from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import Checkbox from "@mui/material/Checkbox";
import ListItemText from "@mui/material/ListItemText";

type MultiSelectAutoCompleteProps<OptionType extends object> = {
  name: string;
  control: Control<FieldValues>;
  options: OptionType[];
  getOptionLabel: (option: OptionType) => string;
  label: string;
  // 可选：自定义选中判断逻辑，默认比较引用
  getOptionSelected?: (option: OptionType, value: OptionType) => boolean;
} & Omit<AutocompleteProps<OptionType, true>, "name" | "control" | "options" | "getOptionLabel" | "multiple">;

export function MultiSelectAutoComplete<OptionType extends object>({
  name,
  control,
  options,
  getOptionLabel,
  label,
  getOptionSelected = (option, value) => option === value,
  ...rest
}: MultiSelectAutoCompleteProps<OptionType>) {
  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { onChange, value } }) => (
        <Autocomplete
          multiple
          options={options}
          getOptionLabel={getOptionLabel}
          getOptionSelected={getOptionSelected}
          value={value || []} // 初始值为空数组
          onChange={(_event, newValue) => onChange(newValue)} // 直接把选中数组传给表单
          renderOption={(props, option, { selected }) => (
            <li {...props}>
              <Checkbox checked={selected} />
              <ListItemText primary={getOptionLabel(option)} />
            </li>
          )}
          renderInput={(params) => (
            <TextField {...params} label={label} placeholder="请选择" />
          )}
          {...rest}
        />
      )}
    />
  );
}

在表单中使用 #

import { useForm, FieldValues } from "react-hook-form";
import { MultiSelectAutoComplete } from "./MultiSelectAutoComplete";

type FormValues = {
  selectedTags: { id: number; name: string }[];
};

const tags = [
  { id: 1, name: "React" },
  { id: 2, name: "Material UI" },
  { id: 3, name: "React Hook Form" },
];

export function MyForm() {
  const { control, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      selectedTags: [], // 初始空数组
    },
  });

  const onSubmit = (data: FormValues) => {
    console.log("选中的选项：", data.selectedTags);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <MultiSelectAutoComplete
        name="selectedTags"
        control={control}
        options={tags}
        getOptionLabel={(option) => option.name}
        getOptionSelected={(option, value) => option.id === value.id} // 用id判断选中，避免引用问题
        label="选择标签"
      />
      <button type="submit">提交</button>
    </form>
  );
}

关键注意点 #

1. 必须用Controller：AutoComplete的value和onChange逻辑和原生input不同，Controller能自动处理状态同步，避免手动onChange导致的状态不一致。
2. getOptionSelected配置：如果选项是对象，一定要用唯一标识（比如id）判断选中状态，而非默认的引用比较——否则选项来自API请求时，会出现选中状态不匹配的问题。
3. 初始值设置：表单defaultValues对应字段要设为空数组，AutoComplete的value也要默认设为空数组，避免undefined导致异常。
4. onChange的正确传递：AutoComplete的onChange第一个参数是选中的新数组，直接传给field.onChange即可，无需额外处理。

问题根源解释 #

• 不加onChange时：组件未将选中值同步到React Hook Form的表单状态，所以表单拿不到值，但组件内部维护了选中状态，因此能识别选中项。
• 加了onChange但处理错误：比如未将完整选中数组传给表单，或value未与表单状态绑定，导致组件内部选中状态与表单状态不一致，出现复选框不勾选、重复选中的问题。

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