Функция redux-form onSubmit не запускается

Я искал много способов сделать это и даже сделал HOC и заменил его на компонент класса. Я пробовал несколько известных мне способов, например, вызов handleSubmit с опорой. Я использую инструменты redux, и я привык видеть что-то вроде submit_failed или submit_success, но я этого не вижу и не знаю, почему функция onSubmit не срабатывает. Вот образец одного из способов, которыми я это сделал, в котором я следую простому примеру в документации в форме сокращения:

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { Form, Button, Grid } from 'semantic-ui-react';
import { Link } from 'react-router-dom';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {signup} from '../../actions/user-actions';
import { required, minValue7, email, renderField } from '../helpers/validations';


let SignupForm = (props) => {
  const { handleSubmit } = props.signup;
  return (
      <Grid centered columns={2}>
        <Grid.Column className="home">
          <Form className="forms" onSubmit={ handleSubmit }>
            <Form.Field inline>
               <Field 
                name="username" 
                component={renderField}
                type="text" 
                placeholder="Username"
                label="Username"
                validate={[required]}
              />
            </Form.Field>

            <Form.Field inline>
               <Field 
                name="email" 
                component={renderField}
                type="email" 
                placeholder="Email"
                label="Email"
                validate={[required, email]}
              />
            </Form.Field>

             <Form.Field inline>
               <Field 
                name="password" 
                component={renderField} 
                type="password" 
                placeholder="Password"
                label="Password"
                validate={[required, minValue7]}
              />
            </Form.Field>
            <Link to={'/signup2'}>
              <Button type="submit">Save</Button>
            </Link>
          </Form>
        </Grid.Column>
      </Grid>

  )
}

SignupForm = reduxForm({
  form: 'form1'
})(SignupForm)

const mapStateToProps = (state, ownProps) => {
 return {
  userSignup: state.userSignup
 }
}

const mapDispatchToProps = (dispatch) => {
 return bindActionCreators({signup}, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(SignupForm)

Также я пробовал это там, где я делаю const {handleSubmit} = props, а затем меняю `` onSubmit = {handleSubmit (this.props.signup)}


person Sanjeet Uppal    schedule 21.08.2017    source источник
comment
Почему вы оборачиваете кнопку отправки в ссылку redux-router?   -  person Mister Epic    schedule 22.08.2017
comment
Таким образом, он перенаправляется на следующую форму после нажатия   -  person Sanjeet Uppal    schedule 22.08.2017
comment
Итак, вы хотите, чтобы Link сработал одновременно с срабатыванием обработчика событий. Я не уверен, что на самом деле произойдет, но не удивлюсь, если произойдет перенаправление, которое затем предотвратит выполнение обработчика. Плевать здесь, но создать компонент для каждого шага мастера - WizardStep1, WizardStep2 и т.д ... Вместо использования Link ваш обработчик (ы) событий мог бы принимать данные из формы и на основе этого определять, какой шаг должен быть текущим шагом и сохраните это в состоянии. Затем на вашей странице ваш render() метод может проверить, какой шаг является текущим, и обработать его соответствующим образом.   -  person Mister Epic    schedule 22.08.2017
comment
С отредактированным кодом в ответе я не перенаправляюсь ни на один совет, я даже создал функцию в локальной реакции, которая, если перенаправление истинно в состоянии, использовать перенаправление из реактивного маршрутизатора   -  person Sanjeet Uppal    schedule 22.08.2017


Ответы (1)


В итоге мне пришлось придерживаться своей тактики использования синтаксиса класса с помощью @Mister Epic, перенаправление происходило до действия.

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { Form, Button, Grid } from 'semantic-ui-react';
import { required, minValue7, email, renderField } from '../helpers/validations';


class SignupForm extends React.Component {
  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }

  submit(values) {
    this.props.signup(values)
    this.props.history.push('/form2')
  }

  render () {
    return (
        <Grid centered columns={2}>
          <Grid.Column className="home">
            <Form className="forms" onSubmit={ this.props.handleSubmit(this.props.submit) }>
              <Form.Field inline>
                 <Field 
                  name="username" 
                  component={renderField}
                  type="text" 
                  placeholder="Username"
                  label="Username"
                  validate={[required]}
                />
              </Form.Field>

              <Form.Field inline>
                 <Field 
                  name="email" 
                  component={renderField}
                  type="email" 
                  placeholder="Email"
                  label="Email"
                  validate={[required, email]}
                />
              </Form.Field>

               <Form.Field inline>
                 <Field 
                  name="password" 
                  component={renderField} 
                  type="password" 
                  placeholder="Password"
                  label="Password"
                  validate={[required, minValue7]}
                />
              </Form.Field>
                <Button type="submit">Save</Button>
            </Form>
          </Grid.Column>
        </Grid>

    )
  }

}

SignupForm = reduxForm({
  form: 'form1'
})(SignupForm)


export default SignupForm
person Sanjeet Uppal    schedule 22.08.2017