React单选框默认选中异常：No按钮自动选中问题求助

核心问题分析 #

1. 表单初始值缺失：你的values.has_broker在组件初始化时大概率是undefined或null，此时values.has_broker === 'Yes'和values.has_broker === 'No'都不成立，但浏览器会自动选中页面中最后一个未指定默认选中状态的单选按钮，导致「No」被默认选中。
2. 标签与输入框关联错误：两个<label>的htmlFor属性都设为has_broker，但对应的<input>都没有设置匹配的id，点击标签时无法正确触发单选按钮的选中状态，属于表单元素的规范问题。

具体修复步骤 #

1. 设置表单初始值 #

在表单状态初始化代码中，给has_broker设置明确的初始值（比如空字符串或null），避免浏览器自动选中单选按钮：

// 以react-hook-form为例，其他表单库逻辑类似
const { register, handleSubmit, values, setFieldValue } = useForm({
  defaultValues: {
    has_broker: '', // 初始无选中状态
    broker: ''
  }
});

2. 修正标签与输入框的关联 #

给每个单选按钮设置唯一id，并让对应label的htmlFor匹配该id：

<div id='broker'>
  <div className='d-flex justify-content-between mb-3'>
    <label>Have you engaged a broker or banker?</label>
    <div>
      <label className='form-check-label me-2' htmlFor='has_broker_yes'>Yes</label>
      <input 
        className='form-check-input me-4' 
        id='has_broker_yes' 
        name='has_broker' 
        type='radio' 
        value='Yes' 
        onChange={handleChange} 
        checked={values.has_broker === 'Yes'} 
      />

      <label className='form-check-label me-2' htmlFor='has_broker_no'>No</label>
      <input 
        className='form-check-input' 
        id='has_broker_no' 
        name='has_broker' 
        type='radio' 
        value='No' 
        checked={values.has_broker === 'No'}
        onChange={(e) => {
            handleChange(e)
            setFieldValue('broker', '')
        }} 
      />
    </div>
  </div>

  {
    values.has_broker === 'Yes' && <>
      <FormControl type='text' name='broker' title='Broker Name' required={true} placeholder='e.g. Morgan Stanley'
        value={values.broker} error={errors.broker}
        onChange={handleChange}
      />
    </>
  }

  <hr />
</div>

3. 可选：默认无选中状态 #

确保初始values.has_broker的值不是'Yes'或'No'，这样页面加载时两个单选按钮都不会被选中，用户必须主动选择。

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