2016-12-13 23 views
1

私はRedux-form v6をプロジェクトに統合しようとしていますが、サンプルコードをどれほど厳密に再現しようとも、redux-formを取得できません。handleSubmitでRedux-formフィールドの値を取得できません

すべてが正しく接続されているようですが、handleSubmit関数はフォームフィールドの値をキャプチャしません。

この問題に関するガイダンスをいただければ幸いです。私のコードは以下の通りです。

還元剤からは、何も問題はないようです。

import { reducer as formReducer } from 'redux-form'; 

export default combineReducers({ 
    form: formReducer 
}); 

そして、私はすべてのReduxの形式の関数とうまくフォームコンポーネントを装飾Reduxの形態にフォームコンポーネントを接続するためのコンテナコンポーネントを使用します。

CreateCompany.js

import CreateCompany from '../components/create_company'; 
import { reduxForm } from 'redux-form'; 

export default reduxForm({ 
    form: 'company-submission' 
})(CreateCompany); 

実際の形態は、このようになります。

CreateCompany.jsx

<form onSubmit={ handleSubmit(values => {console.log("values",values)})}> 

    <div> 
    <label htmlFor="group">Group Name (Required)</label> 
    <Field name="group" component={FormInput} type="text"/> 
    </div> 

    <div> 
    <Field 
     name="group-type" 
     component={DropDownSelect} 
     selectOptions={this.state.groupTypes} 
     id="group-type" 
    /> 
    <label>Group Type</label> 
    </div> 

    <button type="submit">Log In</button> 

</form> 

フィールドコンポーネントに供給されるテキスト入力ステートレス機能。

FormInput.js(注:私は、フィールドに入力できるようにする入力タグで{...input.value}を含まなければならなかったのコード例では、唯一{...input}が使用されている。)

import React from 'react'; 

const FormInput = ({ id, type, className, input }) => { 
    className = className || ""; 
    id = id || ""; 
    return (
    <input id={id} {...input.value} type={type} className={className}/> 
) 
} 

export default FormInput; 

DropDownSelect.js

import React from 'react'; 

const DropDownSelect = ({ input, selectOptions, id }) => { 
    const renderSelectOptions = (selectOption) => (
    <option key={selectOption} value={selectOption}>{selectOption}</option> 
) 
    return (
    <select id={id} {...input}> 
     {selectOptions.map(renderSelectOptions)} 
    </select> 
); 
} 

export default DropDownSelect; 

私が間違っていることは何ですか?

+0

handleSubmit関数は実行されますか? – lustoykov

+0

はい、私はhandleSubmitに渡す関数によってそうするように指示されているので、空のオブジェクトをコンソールに記録します –

答えて

0

handleSubmitは、CreateCompanyコンポーネントの外で定義し、小道具を介して渡す必要があります。チェックアウトexamples

関連する問題