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

Question

我有以下 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;

如您所见，有 2 组单选按钮和一个 Link 路由返回主页。我希望在启用Link 之前检查这两个单选按钮组，并且用户可以单击它，到目前为止，用户可以在有/没有检查单选按钮的情况下离开此页面。如何添加此验证？

此外，单选按钮将来可以从 2 组增加到更多，那么在检查所有单选按钮之前，我该如何添加此验证检查并禁用 Link 到主页？

Answer 1

快速草稿，也许不是最好的解决方案，但希望它对背后的逻辑有所帮助。

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

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

并使用 setState 使用 input 中的 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)}>

希望对你有帮助！