React单选框选中后文本字段显示异常及提交验证问题

1. 修复单选框切换文本框显示问题 #

先核对单选框与文本框的关联逻辑，确保选中「Yes」时文本框能正确渲染/显示。以下是常见场景的实现示例：

Vue 场景示例 #

<!-- 单选框组 -->
<div class="q4-radio-group">
  <input type="radio" name="question4" value="Yes" v-model="q4Answer"> Yes
  <input type="radio" name="question4" value="No" v-model="q4Answer"> No
</div>
<!-- 动态显示的文本框 -->
<div class="q4-text-input" v-if="q4Answer === 'Yes'">
  <label>补充说明:</label>
  <input type="text" v-model="q4Supplement" id="q4-supplement" ref="q4Supplement">
</div>

• 确保v-model绑定的变量（如q4Answer）能同步单选框选中值
• 用v-if而非v-show，保证文本框仅在选中「Yes」时创建，避免验证时获取不存在的DOM元素

原生JS 场景示例 #

const yesRadio = document.querySelector('input[name="question4"][value="Yes"]');
const noRadio = document.querySelector('input[name="question4"][value="No"]');
const textInputContainer = document.getElementById('q4-text-container');

yesRadio.addEventListener('change', () => {
  textInputContainer.style.display = yesRadio.checked ? 'block' : 'none';
});

noRadio.addEventListener('change', () => {
  textInputContainer.style.display = 'none';
});

2. 修复requiresInput: true失效问题 #

静态的requiresInput属性无法适配动态显示的文本框，需改用动态条件验证，在提交时根据单选框状态强制校验文本框内容：

原生JS 提交验证示例 #

function handleSubmit(e) {
  e.preventDefault();
  let isFormValid = true;
  const q4Answer = document.querySelector('input[name="question4"]:checked')?.value;
  const q4Supplement = document.getElementById('q4-supplement')?.value;

  // 第4题动态验证
  if (q4Answer === 'Yes') {
    if (!q4Supplement || q4Supplement.trim() === '') {
      isFormValid = false;
      alert('请填写第4题的补充内容');
      document.getElementById('q4-supplement').focus();
    }
  }

  // 其他题验证逻辑...

  if (isFormValid) {
    document.forms[0].submit();
  }
}

Vue 组件内验证示例 #

methods: {
  validateForm() {
    let isValid = true;
    // 第4题验证
    if (this.q4Answer === 'Yes' && (!this.q4Supplement || this.q4Supplement.trim() === '')) {
      isValid = false;
      this.$refs.q4Supplement.focus();
      this.errorMessage = '请填写第4题的补充内容';
    }
    return isValid;
  },
  handleSubmit() {
    if (this.validateForm()) {
      // 执行提交逻辑
      console.log('表单提交成功');
    }
  }
}

关键注意事项 #

• 不要依赖组件库的静态必填属性（如requiresInput），动态显示的元素需手动添加条件验证
• 验证时需先确认文本框已存在（即单选框选中「Yes」），再校验其内容
• 验证失败时，聚焦到对应文本框并给出明确提示，优化用户体验

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