2016-07-24 4 views
0

私はredux形式で再度問題があります。私は親からhandleSubmit関数を呼び出していますが、windows.alert()は正しく呼び出されていますが、データは関数に渡されません。私は間違って何をしていますか?redux形式のデータはhandleSubmitに渡されません

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: '[email protected]' 
    }); 
    } 

    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の-ドキュメントは言う: 「あなたはその{有効に必要なReduxのフォームの以前のバージョンからアップグレードしている:真}返される "。 私はその問題はそれだと思っていますが、私は本当にそれが意味することを理解していません! 私のバージョン - > "redux-form": "^ 3.0.0" ありがとう!

+0

親の内部に子コンポーネントをレンダリングするコードを投稿することができます – rambossa

+0

子コンポーネントはDashboardAddingという最初のコードです。 – Pibo

+0

親は私が書いた2番目のコードです。これは、以下を行います:import {DashboardAdding} from 'components';レンダリングします。あなたは何か違うものを求めていますか? – Pibo

答えて

0

私が期待しなかった解決策を見つけてください...フォームはjson形式でデータを与えます。 JSON.stringify()はそれを混乱させました。

私はそれが誰かを助けることを願っています。 Bye

関連する問題