Question

我再次使用redux-form遇到麻烦。我从父调用handleSubmit函数，并且正确调用了windows.alert（），但数据没有传递给函数。我做错了什么？

import React, {Component, PropTypes} from 'react';
import {reduxForm} from 'redux-form';
import memberValidation from './memberValidation';

class DashboardAdding extends Component {
  static propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    resetForm: PropTypes.func.isRequired
  }

  render() {
    const {
        fields: { pseudo, email},
        handleSubmit,
        resetForm
    } = this.props;
    return (
      <div>
        <form className="form-horizontal" onSubmit={handleSubmit.bind(this)}>
          <div className={'form-group' + (pseudo.error && pseudo.touched ? ' has-error' : '')}>
            <label className="col-sm-2">Pseudo</label>
            <div className={'col-sm-8 '}>
               <input type="text" className="form-control" id="pseudo" {...pseudo}/>
              {pseudo.error && pseudo.touched && <div className="text-danger">{pseudo.error}</div>}
          </div>
          </div>
          <div className={'form-group' + (email.error && email.touched ? ' has-error' : '')}>
             <label className="col-sm-2">Email</label>
            <div className={'col-sm-8 '}>
              <input type="text" className="form-control" id="email" {...email}/>
              {email.error && email.touched && <div className="text-danger">{email.error}</div>}
          </div>
          </div>
          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <button className="btn btn-success" onClick={handleSubmit}>
                <i className="fa fa-paper-plane"/> Submit
              </button>
              <button className="btn btn-warning" onClick={resetForm} style={{marginLeft: 15}}>
                <i className="fa fa-undo"/> Reset
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}
export default reduxForm({
  form: 'dashboardForm',
  fields: ['pseudo', 'email'],
  validate: memberValidation,
  asyncBlurFields: ['email']
})(DashboardAdding);

...和调用handleSubmit的父级：

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import Helmet from 'react-helmet';
import {bindActionCreators} from 'redux';
import {initialize} from 'redux-form';
import {isLoaded, loadMembers} from 'redux/modules/members/members';
import * as addActions from 'redux/modules/members/addSingleMember';
import {addMember} from 'redux/modules/members/addSingleMember';
import { DashboardList } from 'components';
import { DashboardHeader } from 'components';
import { DashboardAdding } from 'components';
import { asyncConnect } from 'redux-async-connect';

@asyncConnect([{
  deferred: true,
  promise: ({store: {dispatch, getState}}) => {
     if (!isLoaded(getState())) {
      return dispatch(loadMembers());
    }
  }
}])

class Dashboard extends Component {

  static propTypes = {
    members: PropTypes.array,
    error: PropTypes.string,
    loading: PropTypes.bool,
    addMember: PropTypes.func,
   initialize: PropTypes.func.isRequired
  }

  handleSubmit = (data, dispatch) => {
    window.alert(data);
    dispatch(addMember(JSON.stringify(data)));
    this.props.initialize('dashboardForm', {});
  }

  handleInitialize = () => {
    this.props.initialize('dashboardForm', {
      pseudo: 'Pibo',
      email: 'pibirino@gmail.com'
    });
  }

  render() {
    const {members} = this.props;
    return (
      <div className="container">
        <h1>Dashboard</h1>
        <Helmet title="Dashboard"/>
        <DashboardHeader />
        <div>
          <DashboardList members={members}/>
          <h3>Ici commence le form</h3>
          <div style={{textAlign: 'center', margin: 15}}>
            <button className="btn btn-primary" onClick={this.handleInitialize}>
              <i className="fa fa-pencil"/> Initialize Form
            </button>
          </div>
        </div>
        <DashboardAdding onSubmit={this.handleSubmit}/>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    members: state.members.data,
    error: state.members.error,
    loading: state.members.loading
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({
    addActions,
    addMember,
    initialize: initialize
  }, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(Dashboard);

redux-documentation说： “您正在从之前版本的redux-form升级，该版本需要返回{valid：true}”。我怀疑问题是，但我真的不明白这可能意味着什么！我的版本 - ＆gt; “redux-form”：“^ 3.0.0” 谢谢！

Answer 1

找到我没想到的解决方案......表单以json格式提供数据。 JSON.stringify（）搞砸了。

我希望它可以帮助别人。再见

redux-form数据不会传递给handleSubmit

1 个答案: