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));

TextBox 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} />
    );
  }
}

无论如何，您应该检查Redux表单文档中的示例：http://redux-form.com/6.5.0/docs/GettingStarted.md/

Redux-form onSubmit没有任何反应

1 个答案: