React中option的selected属性不生效，无法默认选中Male值

当你用React Hook Form的register绑定下拉选择框时，手动给option加selected属性不会生效——因为RHF会接管表单控件的状态，手动设置的属性会被覆盖。

解决办法有两种：

1. 通过useForm的defaultValues初始化默认值 #

在初始化useForm钩子时，直接设置gender字段的默认值：

const { register, handleSubmit } = useForm({
  defaultValues: {
    gender: "Male"
  }
});

然后下拉框代码保持原样，不需要加selected属性：

<select {...register("gender")} className="form-select input" id="gender">
  <option value="Male">{t("signUpPage.male")}</option>
  <option value="Female">{t("signUpPage.female")}</option>
</select>

2. 使用Controller组件（适用于复杂场景） #

如果需要对控件做更多自定义控制，比如异步加载选项等，可以用RHF的Controller组件包裹select：

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

// 初始化useForm时解构出control
const { control, handleSubmit } = useForm();

// 渲染下拉框
<Controller
  name="gender"
  control={control}
  defaultValue="Male"
  render={({ field }) => (
    <select {...field} className="form-select input" id="gender">
      <option value="Male">{t("signUpPage.male")}</option>
      <option value="Female">{t("signUpPage.female")}</option>
    </select>
  )}
/>

核心原因是：register方法会给select元素注入value和onChange属性，这些属性的优先级高于手动设置的selected，所以后者会被RHF的状态覆盖。

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