如何验证 redux 表单中的单选按钮值？答案

【问题标题】：How to validate radio button values in redux forms ?如何验证 redux 表单中的单选按钮值？
【发布时间】：2017-06-03 00:16:14
【问题描述】：

我正在设计一个包含复选框和单选按钮的应用程序。

三个单选按钮位于三个不同的组件中。如下所示，我想验证这些单选按钮（或选项）是否被选中。如何做到这一点？（我使用的是 redux-form 6.4.3）

Radio1.js

Import { Field } from 'redux-form';
   class radio1 extends react.component {

     render () {

       return (  
            <tr>
              <td>
                <table>
                  <tbody>
                     <tr>
                       <td>
                          <Field component={renderInput} type="radio" value="radio1" /></td> 
                        <td>This is radio button 1</td>
                  </tr>
                </tbody>
              </table>
             </td>
           <tr>
        )
      }
    }
export default radio1;

Radio2.js

 Import { Field } from 'redux-form';
class radio2 extends react.component {

 render () {

   return (  
        <tr>
            <td>
               <table>
                   <tbody>
                      <tr>
                        <td>
                             <Field component={renderInput} type="radio" value="radio2" /></td> 
                              <td>This is radio button 2</td>
                        </tr>
                    </tbody>
                 </table>
                </td>
               </tr>
    )
  }
}
export default radio2;

Radio3.js

 Import { Field } from 'redux-form';
class radio3 extends react.component {

 render () {

   return (  
        <tr>
          <td>
             <table>
               <tbody>
                  <tr>
                    <td>
                       <Field component={renderInput} type="radio" value="radio3" /></td> 
                          <td>This is radio button 3</td>
                    </tr>
                </tbody>
               </table>
             </td>
          </tr>
    )
  }
}
export default radio3;

renderInput.js

       const renderInput= ({input, placeholder, defaultValue, meta: {touched, error, warning}}) =>        
        <div>
          <input {...input} type={type} />
        </div>
);

export default renderInput;

Main.js

import radio1 from './radio1';
import radio2 from './radio2';
import radio3 from './radio3';

class Main extends React.Component {

render () {
return (
<table>
<tbody>
<radio1  />
<radio2  />
<radio3  />
</tbody>
</table>

)

}

}

export default Main;

【问题讨论】：

标签： reactjs redux react-redux redux-form

【解决方案1】：

将相同的名称参数传递给所有字段 <Field name="myRadio" ... />
创建验证函数

const validate = values => {
    let errors = {};

    if (!values.myRadio){
        errors.myRadio = 'Required';
    }

    return errors;
};

将此功能添加到reduxForm()

export default reduxForm({
  form: 'syncValidation',  // a unique identifier for this form
  validate                 // <--- validation function given to redux-form
})(SyncValidationForm)

【讨论】：

这很好，但是每个同名字段显示一条错误消息，如何解决？

【解决方案2】：

Field 组件有一个 validate 属性。你可以传递一个函数来验证你的值

function validateRadio(value) {
   if(!value) {
     return 'You need to check this value'
   }
}
<Field component={renderInput} type="radio" value="radio3" validate={validateRadio} />

文档中的相关部分：http://redux-form.com/6.4.3/docs/api/Field.md/

【讨论】：