Форма Redux: как добавить функцию после успешной проверки и перед отправкой

Question

У меня есть форма редукции, которая имеет валидацию. Когда проверка вернется без ошибок, она будет по умолчанию подчиняться контроллеру в handleSubmit().

class SomeComponent extends Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    const { handleSubmit, fields: { field }, submitting, values } = this.props; 
    return (
    <form onSubmit={handleSubmit(this.props.someActionForm)}> 
     <TextField {...field.input} 
     type="text" 
     label="FIELD" 
     floatingLabelText="FIELD" 
     errorText={field.touched? field.error: null} 
     /> 

     <div className="col-xs-12"> 
     <FlatButton 
      label="ACTIVATE" 
      fullWidth={true} 
      style={styles.fullButton} 
      backgroundColor="#4FCDCC" 
      hoverColor="#59e5e3" 
      type="submit" 
      disabled={submitting} 
     /> 
     </div> 
    </form> 
    ); 
    } 
} 

function validate(values) { 
    const errors = {}; 

    if(!values.field) { 
    errors.field= "Field must not be empty !!!"; 
    } 

    return errors; 
} 

SomeComponent = reduxForm({ 
    form: "SomeComponent", 
    fields: ['field'], 
    validate 
}, mapStateToProps, mapDispatchToProps)(SomeComponent); 

Как я могу добавить функцию, например, загрузка элемента должна быть включена, когда проверка успешна, но до того, как форма подчиняется действию (handleSubmit())?

Спасибо заранее

Answer 1

Вы можете добавить метод класса, как это:

class SomeComponent extends Component { 
    submit(formProps) { 
    // your logic 
    this.props.someActionForm(formProps); 
    }; 

    render() { 
    const {handleSubmit, fields: {field}, submitting, values} = this.props; 
    return (
     <form onSubmit={handleSubmit(this.submit)}> 
     <TextField {...field.input} 
        type="text" 
        label="FIELD" 
        floatingLabelText="FIELD" 
        errorText={field.touched ? field.error : null} 
     /> 

     <div className="col-xs-12"> 
      <FlatButton 
      label="ACTIVATE" 
      fullWidth={true} 
      style={styles.fullButton} 
      backgroundColor="#4FCDCC" 
      hoverColor="#59e5e3" 
      type="submit" 
      disabled={submitting} 
      /> 
     </div> 
     </form> 
    ); 
    } 
} 

Обратите внимание, что вы забыли return в render методе