React MUI Select结合react-hook-form：标签不更新与默认选项显示问题

你的核心问题是错误地同时使用了Controller和register，导致表单字段的控制逻辑冲突。以下是修正方案，能同时满足占位显示和标签更新的需求：

修正后的完整代码 #

import { useForm, Controller } from "react-hook-form";
import { Select, MenuItem, InputAdornment } from "@mui/material";
import { Email } from "@mui/icons-material";

export default function DesignTypeSelect() {
  const { control, formState: { errors } } = useForm({
    defaultValues: {
      designTypeId: "" // 初始化空值，对应占位选项
    }
  });

  return (
    <Controller
      control={control}
      name="designTypeId"
      rules={{ required: "This field is required" }}
      render={({ field }) => (
        <Select
          {...field} // 直接绑定Controller提供的字段控制属性
          className="w-full"
          displayEmpty
          error={!!errors.designTypeId}
          label="Design Type"
          labelId="designTypeId-label"
          startAdornment={
            <InputAdornment position="start">
              <Email />
            </InputAdornment>
          }
        >
          <MenuItem disabled value="">
            Select a design type
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
          <MenuItem value={40}>Forty</MenuItem>
        </Select>
      )}
    />
  );
}

关键修正点 #

• 移除冗余的register：Controller已经封装了表单字段的控制逻辑，无需再调用register，直接使用render回调里的field对象即可同步值和更新状态。
• 设置初始空值：在useForm的defaultValues中把designTypeId设为空字符串，配合displayEmpty属性，初始化时自动显示占位选项。
• 绑定field属性：通过{...field}将value、onChange等核心属性传递给Select，确保切换选项时表单值和组件标签同步更新。

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