Question

我一直在寻找许多方法来做到这一点，甚至做了一个HOC并将其改为一个类组件。我尝试了几种我见过的方法，比如用prop调用handleSubmit。我正在使用redux工具，我习惯于看到诸如submit_failed或submit_success之类的东西，但是我没有看到，我也不知道为什么onSubmit函数没有触发。以下是我在其中使用redux-form docs中的简单示例的方法之一的示例：

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）}

Answer 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

redux-form onSubmit函数没有触发

1 个答案: