2

我有一个无法解决的问题，尝试使用 redux-form。我正在尝试 Erikras 样板。我希望表单成为一个组件，并且父级调用handleSubmit（目前使用console.log 只是为了确认它有效）。在这里，两个：

import React, {Component, PropTypes} from 'react';
import Helmet from 'react-helmet';
import {initialize} from 'redux-form';
import {connect} from 'react-redux';
import * as membersActions from 'redux/modules/members';
import {isLoaded, loadMembers} from 'redux/modules/members';
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());
    }
  }
}])
@connect(
  state => ({
    members: state.members.data,
    error: state.members.error,
    loading: state.members.loading
  }),
  {...membersActions, initialize })
export default class Dashboard extends Component {

  static propTypes = {
    initialize: PropTypes.func.isRequired,
    members: PropTypes.array,
    loadMembers: PropTypes.func.isRequired
  }

  handleSubmit = (data) => {
    console.log(data);
    this.props.initialize('dashAdding', {});
  }

  handleInitialize = () => {
    this.props.initialize('dashAdding', {
      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}/>
        <p>Bleeeeah!!</p>
      </div>
    );
  }
}

这里是孩子：

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

@reduxForm({
 form: 'dashAdding',
 fields: ['pseudo', 'email'],
  validate: memberValidation
})

export default 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;
    const renderInput = (field, label) =>
     <div className={'form-group' + (field.error && field.touched ? ' has-error' : '')}>
        <label htmlFor={field.name} className="col-sm-2">{label}</label>
        <div className={'col-sm-8 '}>
           <input type="text" className="form-control" id={field.name} {...field}/>
        </div>
      </div>;

    return (
     <div>
        <form className="form-horizontal" onSubmit={handleSubmit}>
          {renderInput(pseudo, 'Full Name')}
          {renderInput(email, 'Email', true)}
          <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>
    );
  }
}

所以......它不起作用我想我错过了一些重要的知识。我认为原因是因为表单组件是愚蠢的，它没有调度功能。所以，我尝试添加这个（以几种不同的方式多次）从特定文件夹中导入动作创建者：

@connect(() => ({}),
  dispatch => actionCreators( dispatch)
)

但我仍然没有得到我想要的。有什么问题？

4

1 回答 1

0

所以，最后我自己找到了答案。事实上，我决定不使用 @connect，whitch 已被弃用（尽管它仍在样板文件中使用）并使用 connect，如 redux-form 文档的示例。唯一的变化与父母有关，但我会将它们都发布，以防我错过了什么。以下代码效果很好。

这是代码：

import React, {Component, PropTypes} from 'react';
import Helmet from 'react-helmet';
import {initialize} from 'redux-form';
import {connect} from 'react-redux';
import * as membersActions from 'redux/modules/members';
import {isLoaded, loadMembers} from 'redux/modules/members';
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,
    newMemberData: PropTypes.object
  }

  handleSubmit = (data, dispatch) => {
    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,
    newMemberData: state.addSingleMember.data
  };
}

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

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

...和子组件：

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;
     const renderInput = (field, label) =>
      <div className={'form-group' + (field.error && field.touched ? ' has-error' : '')}>
        <label htmlFor={field.name} className="col-sm-2">{label}</label>
        <div className={'col-sm-8 '}>
           <input type="text" className="form-control" id={field.name} {...field}/>
          {field.error && field.touched && <div className="text-danger">{field.error}</div>}
        </div>
      </div>;

    return (
      <div>
         <form className="form-horizontal" onSubmit={handleSubmit.bind(this)}>
          {renderInput(pseudo, 'Pseudo')}
          {renderInput(email, 'Email', true)}
          <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);

addMember 函数显然包含一个承诺。我希望它会帮助某人:-)

于 2016-07-17T20:49:50.303 回答