Javascript React中的单选按钮验证用于单选按钮的动态数量

我有以下反应组件：

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


const surveyTwo = (props) => {
    return (
        <div className={ classes.screen2 } >

            <table className={ classes.initial__survey__details__table }>
                <thead>
                    <tr>
                        <td>
                            Gender    
                        </td>
                        <td>
                             Age    
                        </td>     
                    </tr>     
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="radio" name="customer_gender" />                                     
                            <label>Male</label>
                        </td>
                        <td>
                            <input type="radio" name="customer_name" />                                   
                            <label>Less than 35</label>
                        </td>     
                    </tr>
                    <tr>
                        <td>
                            <input type="radio" name="customer_gender" />                                    
                            <label>Female</label>
                        </td>
                        <td>
                            <input type="radio" name="customer_name" />                                    
                            <label>More than 35</label>
                        </td>     
                    </tr> 
                    <tr>
                        <td colSpan="2">
                            {/* <button className={ [classes.btn , classes["btn--fullwidth"] , classes.btn__next  ].join(' ') }>NEXT</button> */}
                            <Link to="/" className={ [classes.btn , classes["btn--fullwidth"] , classes.btn__next  ].join(' ') }>
                                Survey 1
                            </Link>
                        </td>   
                    </tr>     
                </tbody>   
            </table>

        </div>
    );
}

export default surveyTwo;

state = {
   genderRadioClicked: false,
   ageRadioClicked: false
   // Add any extra group you create later
}

从“React”导入React；
从“/surveytwo.css”导入类；
从'react router dom'导入{Link}；
const surveyTwo=（道具）=>{
返回(
性别
年龄
男性
少于35
女性
超过35
{/*下一个*/}
调查1
);
}
导出默认调查2；

如您所见，有两组单选按钮和一个返回主页的

链接。我希望在启用
链接
之前检查这两个单选按钮组，并且用户可以单击它，从现在起，用户可以通过/不通过检查单选按钮离开此页面。如何添加此验证

此外，单选按钮将来可能会从两组增加到更多组，因此，我如何着手添加此验证检查并禁用主页的
链接，直到所有单选按钮都被选中？
快速起草了一份草案，可能不是最好的解决方案，但希望它能帮助后面的逻辑

您可以将单选按钮的状态存储在组件的状态中：

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


const surveyTwo = (props) => {
    return (
        <div className={ classes.screen2 } >

            <table className={ classes.initial__survey__details__table }>
                <thead>
                    <tr>
                        <td>
                            Gender    
                        </td>
                        <td>
                             Age    
                        </td>     
                    </tr>     
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="radio" name="customer_gender" />                                     
                            <label>Male</label>
                        </td>
                        <td>
                            <input type="radio" name="customer_name" />                                   
                            <label>Less than 35</label>
                        </td>     
                    </tr>
                    <tr>
                        <td>
                            <input type="radio" name="customer_gender" />                                    
                            <label>Female</label>
                        </td>
                        <td>
                            <input type="radio" name="customer_name" />                                    
                            <label>More than 35</label>
                        </td>     
                    </tr> 
                    <tr>
                        <td colSpan="2">
                            {/* <button className={ [classes.btn , classes["btn--fullwidth"] , classes.btn__next  ].join(' ') }>NEXT</button> */}
                            <Link to="/" className={ [classes.btn , classes["btn--fullwidth"] , classes.btn__next  ].join(' ') }>
                                Survey 1
                            </Link>
                        </td>   
                    </tr>     
                </tbody>   
            </table>

        </div>
    );
}

export default surveyTwo;

state = {
   genderRadioClicked: false,
   ageRadioClicked: false
   // Add any extra group you create later
}

并使用setState通过输入中的onChange事件将其更新为true

验证方法如下所示：

_handleRadioValidation = (e) => {

   // Get the state of all the radio buttons
   const radioStates = this.state

   // Iterate through the radio state object and return the value for 
   // every key and assign it to an array
   const checkedStatus = Object.keys(radioStates).map((key) => {
      return radioStates[key];
   });

   // Once you got the array with the value of the group radios (if 
   // the group is checked or not) filter the array to return only if the 
   // value is equal to false (which means that it's not checked)
   const filteredArray = checkedStatus.filter((value) => value === false)

   // If the length of the resulting array from the filtering is bigger
   // than 0 it means one of the group is false (unchecked)
   // Then you just prevent the default behaviour of the event, in this
   // case that is a link, it will disable the link.
   if (filteredArray.length > 0) {
      e.preventDefault();
      return;
   }

   // If all of them are checked it will execute like normal

}

<Link to="/" onClick={(e) => this._handleRadioValidation(e)}>

最后，将此方法附加到组件，如下所示：

_handleRadioValidation = (e) => {

   // Get the state of all the radio buttons
   const radioStates = this.state

   // Iterate through the radio state object and return the value for 
   // every key and assign it to an array
   const checkedStatus = Object.keys(radioStates).map((key) => {
      return radioStates[key];
   });

   // Once you got the array with the value of the group radios (if 
   // the group is checked or not) filter the array to return only if the 
   // value is equal to false (which means that it's not checked)
   const filteredArray = checkedStatus.filter((value) => value === false)

   // If the length of the resulting array from the filtering is bigger
   // than 0 it means one of the group is false (unchecked)
   // Then you just prevent the default behaviour of the event, in this
   // case that is a link, it will disable the link.
   if (filteredArray.length > 0) {
      e.preventDefault();
      return;
   }

   // If all of them are checked it will execute like normal

}

<Link to="/" onClick={(e) => this._handleRadioValidation(e)}>

this.\u handleradio验证（e）}>

希望有帮助