在React中使用react-hook-form点击按钮修改MUI Select值

以下是完整实现方案，通过react-hook-form的setValue方法，点击按钮即可修改MUI Select组件的选中值：

子组件（RHFSelect）代码 #

封装复用的Select组件，通过useFormContext获取表单上下文方法：

import { MenuItem, Select, Typography } from "@mui/material";
import { useEffect } from "react";
import { useFormContext } from "react-hook-form";

const RHFSelect = ({ name, label, options, required, defaultValue, multiple }) => {
  const { register, unregister, setValue, formState: { errors } } = useFormContext();
  
  // 组件卸载时注销字段
  useEffect(() => {
    return () => unregister(name);
  }, [name, unregister]);

  return (
    <div>
      <Typography>{label}</Typography>
      <Select
        {...register(name)}
        defaultValue={defaultValue}
        multiple={multiple}
        error={!!errors[name]}
      >
        <option value="">Select</option>
        {options.map((ele) => (
          <MenuItem key={ele?.id} value={ele?.value}>
            {ele?.label}
          </MenuItem>
        ))}
      </Select>
      {/* 可选：显示错误提示 */}
      {errors[name] && <Typography color="error">{errors[name].message}</Typography>}
    </div>
  );
};

export default RHFSelect;

选项数据源 #

定义Select组件的下拉选项：

// 居住类型选项
const residenceOptions = [
  { id: 1, label: "租赁", value: "rented" },
  { id: 2, label: "自有", value: "own" }
];

// 城市选项
const citiesOptions = [
  { id: 1, label: "德里", value: "delhi" },
  { id: 2, label: "孟买", value: "mumbai" },
  { id: 3, label: "海得拉巴", value: "hyderabad" }
];

父组件代码 #

通过FormProvider共享表单实例，渲染Select组件和控制按钮：

import { useForm, FormProvider } from "react-hook-form";
import RHFSelect from "./RHFSelect";

const ParentComp = () => {
  const methods = useForm();
  const { setValue, handleSubmit } = methods;

  // 点击按钮修改Select值
  const onButtonClick = () => {
    // 修改单选Select的值
    setValue("residenceType", "own");
    // 修改多选Select的值
    setValue("cities", ["delhi", "mumbai"]);
  };

  // 表单提交处理
  const onSubmit = (data) => {
    console.log("表单数据：", data);
  };

  return (
    <FormProvider {...methods}>
      <div>
        <RHFSelect
          label="居住类型"
          name="residenceType"
          options={residenceOptions}
          defaultValue="rented"
          multiple={false}
        />
        <RHFSelect
          label="城市"
          name="cities"
          options={citiesOptions}
          defaultValue={["mumbai"]}
          multiple={true}
        />
        <button onClick={onButtonClick}>设置选中值</button>
        <button onClick={handleSubmit(onSubmit)}>提交表单</button>
      </div>
    </FormProvider>
  );
};

export default ParentComp;

关键注意事项 #

• 字段名匹配：setValue的第一个参数必须和Select组件的name属性完全一致（区分大小写），比如示例中城市选择器的name是cities，所以setValue要传入"cities"而非"Cities"
• 多选值格式：开启multiple模式时，setValue的第二个参数必须是数组类型
• 上下文共享：子组件必须包裹在FormProvider内部，才能通过useFormContext获取到正确的表单实例
• 字段注销：子组件中的useEffect在卸载时调用unregister，避免不必要的字段残留

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