Question

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

有三个单选按钮放在三个不同的组件中。如下所示，我想验证是否检查过任何这些单选按钮（或选项）。怎么做到这一点？（我使用的是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;

Answer 1

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

const validate = values => {
    const 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)

更多内容：https://redux-form.com/6.8.0/examples/syncvalidation/

Answer 2

get 'users_missions' => 'missions#user'组件有一个Field道具。您可以传递一个验证您的价值的功能

validate

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

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

2 个答案: