React StepZilla多步表单单选按钮验证失效问题排查

核心问题根源 #

你的StepZilla向导单选按钮验证失效，用户无需选择即可进入下一步，主要源于三个关键错误：

1. 重复React Ref导致值获取错误 #

两个单选按钮都绑定了ref="choice"，React中相同ref会被最后一个元素覆盖。这意味着_grabUserInput()里的this.refs.choice.value永远只会返回第二个单选按钮（No）的value，无论用户是否真的选中选项，都会得到"no"，直接让choiceVal: (data.choice != null)永远为true，验证完全失效。

2. 拼写错误导致默认值异常 #

第二个单选按钮的defaultValue写成了this.state.choic（缺少最后一个字母e），无法正确回显存储中的选择状态。

3. 单选按钮值获取逻辑错误 #

单选按钮组不能通过单个ref获取选中值，这种方式无法识别用户的实际选择，必须通过表单查询获取当前选中的选项。

具体修复步骤 #

步骤1：修正值获取逻辑 #

删除单选按钮上的ref="choice"，修改_grabUserInput()方法，通过DOM查询获取选中的单选按钮值：

_grabUserInput() {
  const choice = document.querySelector('input[name="choice"]:checked')?.value;
  return {
    name: this.refs.name.value,
    email: this.refs.email.value,
    choice: choice
  };
}

步骤2：修复拼写错误 #

将第二个单选按钮的defaultValue={this.state.choic}改为defaultValue={this.state.choice}。

步骤3：强化验证规则 #

把_validateData中的choiceVal判断改为明确检查有效选项，避免空值或非法值绕过验证：

_validateData(data) {
  return  {
    nameVal: /^[a-zA-Z]+[a-zA-Z]+$/.test(data.name),
    emailVal: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(data.email),
    choiceVal: ['yes', 'no'].includes(data.choice)
  }
}

步骤4：优化事件绑定与标签关联 #

单选按钮建议用onChange替代onBlur，用户选择时实时触发验证；同时修正label的关联属性（form改为htmlFor）：

<input 
  type="radio" 
  id="yes" 
  name="choice" 
  value="yes" 
  onChange={this.validationCheck}
  defaultChecked={this.state.choice === 'yes'}
  required 
/>
<label htmlFor="yes">Yes</label>
<input 
  type="radio" 
  id="no" 
  name="choice" 
  value="no"
  onChange={this.validationCheck}
  defaultChecked={this.state.choice === 'no'} 
/>
<label htmlFor="no">No</label>

额外优化建议 #

• 避免使用字符串ref（this.refs.name），推荐使用React官方推荐的createRef（类组件）或useRef（函数组件），提升代码安全性。
• 可将表单验证逻辑抽离为独立工具函数，增强代码可维护性。

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