如何让OptionsetField显示默认选中值？以性别字段为例

嘿，这个问题我碰到好多开发者问过，得看你用的是什么技术栈来实现这个Gender字段，我给你整理几个最常用场景的解法：

如果是纯HTML实现的单选框或下拉框，直接给目标选项加对应属性就行：

• 单选按钮（radio）：给male对应的<input>标签加上checked属性

<label>
  <input type="radio" name="gender" value="male" checked> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>

• 下拉选择框（select）：给male对应的<option>标签加上selected属性

<select name="gender">
  <option value="male" selected>Male</option>
  <option value="female">Female</option>
</select>

React里一般用受控组件，只需要把state的初始值设为'male'，再绑定到表单控件上就行：

import { useState } from 'react';

function GenderPicker() {
  // 初始状态设为'male'，默认选中
  const [selectedGender, setSelectedGender] = useState('male');

  return (
    <div className="gender-selector">
      <label>
        <input
          type="radio"
          value="male"
          checked={selectedGender === 'male'}
          onChange={(e) => setSelectedGender(e.target.value)}
        />
        Male
      </label>
      <label>
        <input
          type="radio"
          value="female"
          checked={selectedGender === 'female'}
          onChange={(e) => setSelectedGender(e.target.value)}
        />
        Female
      </label>
    </div>
  );
}

Vue里用v-model绑定数据，只需要在data里把初始值设为'male'：

<template>
  <div class="gender-picker">
    <label>
      <input type="radio" value="male" v-model="selectedGender"> Male
    </label>
    <label>
      <input type="radio" value="female" v-model="selectedGender"> Female
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedGender: 'male' // 默认选中male
    };
  }
};
</script>

小提示 #

要是你用的是第三方表单库（比如Formik、Ant Design、Element UI这些），核心逻辑都是一样的——把字段的**初始值设置为'male'**就行，具体语法可以参考对应库的文档，换汤不换药~

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