Как проверить значения переключателя в редукционных формах?

Question

Я разрабатываю приложение, которое содержит флажки и переключатели.

Существует три переключателя, которые размещаются в трех разных компонентах. Как показано ниже, я хотел проверить правильность любого из этих переключателей (или опций) или нет. Как достичь этого? (Я использую перевождь-форму 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 компонент имеет 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/