如何从其他js文件导入Redux Form

时间:2017-10-28 06:37:58

标签: reactjs react-redux redux-form

我尝试使用redux表单实现动态注册页面。但我收到错误" handleSubmit不是一个函数"。我在Stack Overflow中检查了几个解决方案。我已经尝试过这样但是我在浏览器控制台中提到的错误是我在本地服务器上运行我的应用程序时得到的。

我的代码是:

import _ from 'lodash';
import React, { Component, PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';

const FIELDS = {
  user_name: {
    type: 'input',
    label: 'User Name'
  },
  email: {
    type: 'input',
    label: 'Email ID'
  },
  password: {
    type: 'password',
    label: 'Password'
  }
};

export class SignUp extends Component {
  onSubmit(props) {
    alert('Form Submitted');
  }

  renderField(fieldConfig, field) {
    const fieldHelper = this.props.fields[field];
    return (
      <div className={`form-group ${fieldHelper.touched && fieldHelper.invalid ? 'has-danger' : '' }`}>
        <label>{fieldConfig.label}</label>
        <fieldConfig.type type="text" className="form-control" {...fieldHelper} />
        <div className="text-help">
          {fieldHelper.touched ? fieldHelper.error : ''}
        </div>
      </div>
    );
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(props => this.onSubmit(props))}>
        <h3>Sign Up</h3>
          {_.map(FIELDS, this.renderField.bind(this))}
        <button type="submit" className="btn btn-primary">Sing Up</button>
        <Link to="/" className="btn btn-denger">Cancel</Link>
      </form>
    );
  }
}


function validate(values) {
  const errors = {};
  _.each(FIELDS, (type,field) => {
    if (!values[field]) {
      error[field] = `Enter a ${field}`;
    }
  });
  return errors;
}


export default reduxForm({
  form: 'SignUp',
  fields: _.keys(FIELDS),
  validate
})(SignUp);

和我的其他js代码:

import React, { Component } from 'react';
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
........
import { reduxForm } from "../components/SignUp/SignUp";

export class GuestHeader extends Component {
    render() {
        return (
          <Router>
            <div>
              ..............
              <Route path={"/SignUp"} component={reduxForm} />
            </div>
          </Router>
        );
    }
};

0 个答案:

没有答案