reduxフォームのラジオボタンの値を検証する方法は？

Question

私はチェックボックスとラジオボタンを含むアプリケーションを設計しています。

3つの異なるコンポーネントに配置された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; 

（IはReduxの形6.4.3を使用しています）

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成分はvalidate支柱を有しています。 http://redux-form.com/6.4.3/docs/api/Field.md/

：あなたは、ドキュメントにあなたの価値

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

関連セクションを検証する関数を渡すことができます