Redux表單onSubmit什麼也沒有發生

Question

我想問一下，我在代碼上想的是什麼。看來submitForm函數在我提交表單時不工作/觸發。我無法從我的表單字段獲取值。這裏是我的代碼：

import React from 'react'; 
import { reduxForm,reset, Field } from 'redux-form'; 

class FormProfile extends React.Component { 
    submitForm(formProps){ 
     console.log(formProps); 
    } 

    render(){ 

     const { error, handleSubmit } = this.props; 

     return (
      <form onSubmit={this.submitForm.bind(this)}> 
       <Row> 
        <Col lg={6}> 
         <Field name="name" type="text" component={TextBoxComponent} placeholder="Compay Name" label="* Company Name" required /> 
         <Field name="website" type="text" component={TextBoxComponent} placeholder="www.yourdomain.com" label="Website" /> 
         <Field name="email" type="text" component={TextBoxComponent} placeholder="How can we contact your Company" label="* Contact Email" required /> 
        </Col> 
       </Row> 
      </form> 
     ); 
    } 
} 

const form = reduxForm({ 
    form: 'CreateCompanyProfileForm', 
    validate 
}); 

function validate(formProps){ 
    const error = {}; 

    return error; 
} 

export default (form(FormProfile)); 

文本框Componen

import React from "react"; 
class TextBoxComponent extends React.Component { 
    render(){ 
     return (
      <div className="form-group"> 
       <label className="control-label">{this.props.label}</label> 
       { this.props.sublabel !== undefined ? 
        <em className="text-info"> { this.props.sublabel }</em> 
       :null} 
       <input { ...this.props } type={this.props.type} placeholder={this.props.placeholder} className="form-control"/> 
       { this.props.required && <span className="text-error"></span> } 
      </div> 
     ); 
    } 
} 
export default TextBoxComponent; 

Answer 1

您應該修改這一行：

<form onSubmit={this.submitForm.bind(this)}> 

到：

<form onSubmit={handleSubmit}> 

，那麼你可以刪除：

submitForm(formProps){ 
    console.log(formProps); 
} 

然後你就可以創建一個新的組件包Redux的形式組成：

class SamplePage extends React.Component { 
    handleSubmit = (values) => { 
    // Do something with the form values 
    console.log(values); 
    } 
    render() { 
    return (
     <FormProfile onSubmit={this.handleSubmit} /> 
    ); 
    } 
} 

無論如何，你應該檢查從終極版形式的文檔的例子：http://redux-form.com/6.5.0/docs/GettingStarted.md/