使用react-hook-form实现受控multiselect时reset后选项不恢复问题求助

问题分析 #

使用react-hook-form的reset方法清空表单后，multiselect-react-dropdown组件的下拉列表中，之前选中的选项不会立即恢复显示，只有选择其他选项时才会刷新。这是因为组件没有感知到react-hook-form内部表单状态的变化，导致下拉列表的选项状态没有同步更新。

解决方案 #

方案1：给组件添加动态Key #

通过监听表单中多选框的值，将其转换为字符串作为组件的key。当reset触发值变化时，key改变会强制组件重新渲染，从而同步下拉列表的选项状态。

修改后的核心代码：

import { useForm } from "react-hook-form";
import Multiselect from "multiselect-react-dropdown";

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

const fruits: Fruit[] = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Cherry" },
  { id: 4, name: "Date" }
];

function App() {
  const { register, handleSubmit, reset, watch } = useForm<FormValues>({
    defaultValues: { fruits: [] }
  });
  // 监听多选框的值
  const selectedFruits = watch("fruits");

  const onSubmit = (data: FormValues) => {
    console.log(data);
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Multiselect
        options={fruits}
        {...register("fruits")}
        displayValue="name"
        // 用选中值的字符串作为key，强制组件重新渲染
        key={JSON.stringify(selectedFruits)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

方案2：使用Controller组件（更推荐） #

react-hook-form的Controller组件专门用于处理第三方受控组件，能更精准地同步表单状态和组件状态，避免状态不一致的问题。

修改后的核心代码：

import { useForm, Controller } from "react-hook-form";
import Multiselect from "multiselect-react-dropdown";

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

const fruits: Fruit[] = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Cherry" },
  { id: 4, name: "Date" }
];

function App() {
  const { handleSubmit, reset, control } = useForm<FormValues>({
    defaultValues: { fruits: [] }
  });

  const onSubmit = (data: FormValues) => {
    console.log(data);
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="fruits"
        control={control}
        render={({ field: { onChange, value } }) => (
          <Multiselect
            options={fruits}
            selectedValues={value}
            // 同步选择和移除事件到表单状态
            onSelect={onChange}
            onRemove={onChange}
            displayValue="name"
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

原理说明 #

• 方案1通过key属性强制组件重新渲染，确保下拉列表的选项状态和表单值同步。
• 方案2使用Controller接管组件的value和事件回调，让react-hook-form完全控制组件状态，reset操作会直接同步到组件，实现即时更新。

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