React中动态数量单选按钮的验证实现方案咨询

我来帮你搞定React里动态数量单选按钮的验证问题，结合你给出的组件代码，咱们一步步实现完整的验证功能：

1. 调整组件状态管理 #

首先我们需要用useState来跟踪每个单选组的选中值，以及错误提示信息，确保组件是受控组件：

import React, { useState } from 'react';
import classes from './surveytwo.css';
import { Link } from 'react-router-dom';

const SurveyTwo = (props) => {
  // 管理表单选中值：key是单选组的name，value是选中的选项值
  const [formValues, setFormValues] = useState({
    customer_gender: '',
    customer_age: ''
    // 后续新增的单选组可以在这里初始化，或者从props动态生成
  });
  // 管理错误提示信息
  const [errors, setErrors] = useState({});

2. 处理单选按钮的选中事件 #

编写一个通用的事件处理函数，更新选中值的同时，清除当前组的错误提示（如果有的话）：

// 处理单选按钮选中变化
  const handleRadioChange = (e) => {
    const { name, value } = e.target;
    setFormValues(prev => ({
      ...prev,
      [name]: value
    }));
    // 清除当前单选组的错误提示
    if (errors[name]) {
      setErrors(prev => ({
        ...prev,
        [name]: ''
      }));
    }
  };

3. 实现表单验证逻辑 #

编写验证函数，遍历所有单选组，检查是否有未选中的项，生成对应的错误提示：

// 表单验证函数：返回是否验证通过
  const validateForm = () => {
    const newErrors = {};
    // 遍历所有单选组，检查是否有选中值
    Object.keys(formValues).forEach(groupName => {
      if (!formValues[groupName]) {
        // 根据组名获取友好的提示文本
        newErrors[groupName] = `请选择${getGroupLabel(groupName)}`;
      }
    });
    setErrors(newErrors);
    // 没有错误则返回true
    return Object.keys(newErrors).length === 0;
  };

  // 辅助函数：把单选组name转换成用户友好的标签
  const getGroupLabel = (groupName) => {
    switch(groupName) {
      case 'customer_gender':
        return '性别';
      case 'customer_age':
        return '年龄';
      // 新增单选组时在这里添加映射
      default:
        return groupName;
    }
  };

4. 处理提交/跳转前的验证 #

不管是表单提交还是通过Link跳转，都要先触发验证，只有验证通过后再执行后续逻辑：

// 处理表单提交
  const handleSubmit = (e) => {
    e.preventDefault();
    const isValid = validateForm();
    if (isValid) {
      // 验证通过，执行后续逻辑：比如把数据传给父组件
      props.onSubmit(formValues);
    }
  };

5. 完善渲染部分 #

把原来的单选按钮改成受控组件，绑定checked属性，同时添加错误提示：

return (
    <div className={classes.screen2}>
      <form onSubmit={handleSubmit}>
        <table className={classes.initial__survey__details__table}>
          <thead>
            <tr>
              <td>Gender</td>
              <td>Age</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                {/* 性别单选组 */}
                <div>
                  <input
                    type="radio"
                    name="customer_gender"
                    value="male"
                    checked={formValues.customer_gender === 'male'}
                    onChange={handleRadioChange}
                  />
                  <label>Male</label>
                </div>
                <div>
                  <input
                    type="radio"
                    name="customer_gender"
                    value="female"
                    checked={formValues.customer_gender === 'female'}
                    onChange={handleRadioChange}
                  />
                  <label>Female</label>
                </div>
                {/* 错误提示：如果有错误则显示 */}
                {errors.customer_gender && <span className={classes.error}>{errors.customer_gender}</span>}
              </td>
              <td>
                {/* 年龄单选组 */}
                <div>
                  <input
                    type="radio"
                    name="customer_age"
                    value="18-25"
                    checked={formValues.customer_age === '18-25'}
                    onChange={handleRadioChange}
                  />
                  <label>18-25</label>
                </div>
                <div>
                  <input
                    type="radio"
                    name="customer_age"
                    value="26-35"
                    checked={formValues.customer_age === '26-35'}
                    onChange={handleRadioChange}
                  />
                  <label>26-35</label>
                </div>
                {/* 错误提示 */}
                {errors.customer_age && <span className={classes.error}>{errors.customer_age}</span>}
              </td>
            </tr>
          </tbody>
        </table>
        {/* 提交按钮 */}
        <button type="submit">提交并继续</button>
        {/* 如果用Link跳转，需要拦截点击先验证 */}
        <Link 
          to="/next-page" 
          onClick={(e) => {
            e.preventDefault();
            if (validateForm()) {
              props.history.push('/next-page');
            }
          }}
        >
          跳过提交直接跳转
        </Link>
      </form>
    </div>
  );
};

export default SurveyTwo;

处理真正的动态数量单选组 #

如果你的单选组数量是动态的（比如从后端接口获取或者props传入），可以用数组循环来渲染，示例如下：

// 假设props传入的问题列表：
// props.surveyQuestions = [
//   { name: 'customer_gender', label: 'Gender', options: ['male', 'female'] },
//   { name: 'customer_age', label: 'Age', options: ['18-25', '26-35', '36+'] },
//   // 更多动态生成的问题
// ]

// 初始化formValues改为动态生成：
const initialValues = props.surveyQuestions.reduce((acc, question) => {
  acc[question.name] = '';
  return acc;
}, {});
const [formValues, setFormValues] = useState(initialValues);

// 渲染部分改为循环遍历：
<tbody>
  <tr>
    {props.surveyQuestions.map(question => (
      <td key={question.name}>
        <h4>{question.label}</h4>
        {question.options.map(option => (
          <div key={option}>
            <input
              type="radio"
              name={question.name}
              value={option}
              checked={formValues[question.name] === option}
              onChange={handleRadioChange}
            />
            <label>{option}</label>
          </div>
        ))}
        {errors[question.name] && <span className={classes.error}>{errors[question.name]}</span>}
      </td>
    ))}
  </tr>
</tbody>

这样不管新增多少个单选组，验证逻辑都能自动适配，不用手动修改验证函数~

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