javascript - Uncaught TypeError: _this.props.onSubmit is not a function when using redux-form - Stack Overflow

admin管理员组

文章数量:1332339

I'm working with a React.js frontend, and when I try to login or signup I get the below error when clicking the login or Sign up buttons.

Uncaught TypeError: _this.props.onSubmit is not a function

The stacktrace is pointing to the following file,

/src/containers/Login/index.js

// @flow
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { css, StyleSheet } from 'aphrodite';
import Input from '../../ponents/Input';

const styles = StyleSheet.create({
  card: {
    maxWidth: '500px',
    padding: '3rem 4rem',
    margin: '2rem auto',
  },
});

type Props = {
  onSubmit: () => void,
  handleSubmit: () => void,
  submitting: boolean,
}

class LoginForm extends Component {
  props: Props

  handleSubmit = (data) => this.props.onSubmit(data);
  // handleSubmit: (data) => this.props.onSubmit(data);


  render() {
    const { handleSubmit, submitting } = this.props;

    return (
      <form
        className={`card ${css(styles.card)}`}
        onSubmit={handleSubmit(this.handleSubmit)}
      >
        <h3 style={{ marginBottom: '2rem', textAlign: 'center' }}>Login to Sling</h3>
        <Field name="email" type="text" ponent={Input} placeholder="Email" />
        <Field name="password" type="password" ponent={Input} placeholder="Password" />
        <button
          type="submit"
          disabled={submitting}
          className="btn btn-block btn-primary"
        >
          {submitting ? 'Logging in...' : 'Login'}
        </button>
        <hr style={{ margin: '2rem 0' }} />
        <Link to="/signup" className="btn btn-block btn-secondary">
          Create a new account
        </Link>
      </form>
    );
  }
}

const validate = (values) => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Required';
  }
  if (!values.password) {
    errors.password = 'Required';
  }
  return errors;
};

export default reduxForm({
  form: 'login',
  validate,
})(LoginForm);

specifically the below line,

  handleSubmit = (data) => this.props.onSubmit(data);

Again, any and all help is greatly appreciated.

Finally, the entire project can be found here.

I'm working with a React.js frontend, and when I try to login or signup I get the below error when clicking the login or Sign up buttons.

Uncaught TypeError: _this.props.onSubmit is not a function

The stacktrace is pointing to the following file,

/src/containers/Login/index.js

// @flow
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { css, StyleSheet } from 'aphrodite';
import Input from '../../ponents/Input';

const styles = StyleSheet.create({
  card: {
    maxWidth: '500px',
    padding: '3rem 4rem',
    margin: '2rem auto',
  },
});

type Props = {
  onSubmit: () => void,
  handleSubmit: () => void,
  submitting: boolean,
}

class LoginForm extends Component {
  props: Props

  handleSubmit = (data) => this.props.onSubmit(data);
  // handleSubmit: (data) => this.props.onSubmit(data);


  render() {
    const { handleSubmit, submitting } = this.props;

    return (
      <form
        className={`card ${css(styles.card)}`}
        onSubmit={handleSubmit(this.handleSubmit)}
      >
        <h3 style={{ marginBottom: '2rem', textAlign: 'center' }}>Login to Sling</h3>
        <Field name="email" type="text" ponent={Input} placeholder="Email" />
        <Field name="password" type="password" ponent={Input} placeholder="Password" />
        <button
          type="submit"
          disabled={submitting}
          className="btn btn-block btn-primary"
        >
          {submitting ? 'Logging in...' : 'Login'}
        </button>
        <hr style={{ margin: '2rem 0' }} />
        <Link to="/signup" className="btn btn-block btn-secondary">
          Create a new account
        </Link>
      </form>
    );
  }
}

const validate = (values) => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Required';
  }
  if (!values.password) {
    errors.password = 'Required';
  }
  return errors;
};

export default reduxForm({
  form: 'login',
  validate,
})(LoginForm);

specifically the below line,

  handleSubmit = (data) => this.props.onSubmit(data);

Again, any and all help is greatly appreciated.

Finally, the entire project can be found here.

• javascript
• reactjs
• redux-form

Share Improve this question Follow asked May 9, 2017 at 22:50 ipatchipatch 4,05388 gold badges6464 silver badges103103 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

handleSubmit is a prop "injected" into the Component by redux-form, onSubmit is not... you either have to make sure you're supplying it yourself or just handle the form submit within LoginForm#handleSubmit

You can also do it this way: https://github./erikras/redux-form/issues/1163

references:

• http://redux-form./6.0.0-alpha.4/docs/faq/HandleVsOn.md/

In your App/index.js, you did

 <RedirectAuthenticated path="/login" ponent={Login} {...authProps} /> 

You can see you did not pass a onSubmit function to the Login ponent

You can fix it by making these changes to App/index.js

// add this function
const LoginComponent = () => {
    return (
        <Login onSubmit={() => { console.log("hi") }} />
    )   
}

class App extends Component {
    ...

   render() {
     ....
     <RedirectAuthenticated path="/login" ponent={LoginComponent} {...authProps} />

In this case, you will see 'hi' printed to the dev console.

本文标签： javascriptUncaught TypeError thispropsonSubmit is not a function when using reduxformStack Overflow