未捕獲TypeError：_this.props.onSubmit在使用Redux-form時不是函數

Question

我正在使用React.js前端，當我嘗試登錄或註冊時，單擊login或Sign up時出現以下錯誤鈕釦。

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

堆棧跟蹤指向以下文件中，

/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 '../../components/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" component={Input} placeholder="Email" /> 
     <Field name="password" type="password" component={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); 

具體地，下面線，

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

再次，任何和所有的幫助，不勝感激。

最後，整個項目可以找到here。

Answer 1

handleSubmit是一個道具「注入」組件的終極版形式，onSubmit是不是......你要麼必須確保你自己提供它，還是處理表單內LoginForm#handleSubmit

提交您也可以這樣來做：https://github.com/erikras/redux-form/issues/1163

引用：

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

Answer 2

在你App/index.js，你是

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

你可以看到你沒有通過一個onSubmit功能登錄組件

您可以通過這些變化解決它App/index.js

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

class App extends Component { 
    ... 

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

在這種情況下，您會在開發控制檯上看到'hi'。