React Bootstrap单选按钮如何设置默认选中值？

你的代码存在几个关键问题，导致默认选中和onChange失效，以下是修正方案：

核心问题分析 #

1. 所有单选框的value都绑定了genderValue，导致所有选项的value一致，无法区分选中状态。
2. 缺少checked属性来受控管理选中状态，React-Bootstrap的Form.Check在受控模式下需要通过该属性判断选中。
3. onChange中获取e.target.id而非value，且未处理类型一致性（state初始值是数字，id是字符串）。

修正后的代码 #

const genders = [
  {
    id: 1,
    gender: "male",
  },
  {
    id: 2,
    gender: "female",
  },
  {
    id: 3,
    gender: "do not want to share",
  },
];

export function Gender() {
  // 初始值设为第一个选项的id，保持数字类型
  const [genderValue, setGender] = useState(1);

  const changeGenderValue = (e) => {
    // 将value转为数字，与state类型统一
    const selectedId = parseInt(e.target.value, 10);
    setGender(selectedId);
    console.log(selectedId);
  };

  return (
    <>
      <Form>
        {genders.map((gender) => (
          <Form.Check
            key={gender.id} // 用唯一id作为key，避免索引复用问题
            className="mb-3"
            label={gender.gender}
            name="gendersInput"
            type="radio"
            id={`gender-${gender.id}`} // 添加前缀避免全局id冲突
            value={gender.id} // 每个选项绑定自身的id作为value
            checked={gender.id === genderValue} // 通过state判断是否选中
            onChange={changeGenderValue}
          />
        ))}
      </Form>
    </>
  );
}

关键修改说明 #

• value属性：每个单选框绑定自身的gender.id，确保选项有唯一标识，onChange能正确获取选中值。
• checked属性：通过gender.id === genderValue判断选中状态，因初始state为1（第一个选项的id），页面加载时默认选中第一个选项。
• key属性：使用gender.id而非数组索引，避免组件复用导致的状态异常。
• onChange处理：将获取的value转为数字，保持与state类型一致，避免类型不匹配导致选中判断失效。

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