代码之家 › 专栏 › 技术社区 › Alexander Solonik

针对单选按钮的动态数量,在React中验证单选按钮

validation reactjs javascript

Alexander Solonik · 技术社区 · 8 年前

我有以下反应成分:

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;

如您所见,有两组单选按钮和 Link 返回主页的路由。我希望在 链接 已启用,用户可以单击它,到目前为止,用户可以通过/不通过选中单选按钮离开此页面。如何添加此验证?

此外,单选按钮将来可以从2组增加到更多组,那么我如何添加此验证检查并禁用 链接 直到选中所有单选按钮为止?

1 回复 | 直到 7 年前

Alex Sánchez 8 年前

快速起草了一份草案,可能不是最好的解决方案,但希望它有助于后面的逻辑。

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

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

并使用来自输入使用 设置状态 。

验证方法如下所示:

_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)}>

希望有帮助!