2017-01-02 22 views
1

redux-formを使用して入力フィールドをレンダリングできますが、フィールド内にテキストを入力することはできません(各キーストロークで再描画されるようです) )。redux-formフィールドは入力フィールドにテキストを入力できません

import React, { Component } from 'react'; 
 
import { connect } from 'react-redux'; 
 
import { createStore, combineReducers } from 'redux'; 
 
import { Field, reduxForm, reducer as formReducer } from 'redux-form'; 
 

 
const reducers = { 
 
    // ... your other reducers here ... 
 
    form: formReducer  // <---- Mounted at 'form' 
 
}; 
 

 
const reducer = combineReducers(reducers); 
 
const store = createStore(reducer); 
 

 
class TestForm extends Component { 
 

 
    formSubmit(props) { 
 
    console.log('form submitted'); 
 
    } 
 

 
    render() { 
 

 
    const { handleSubmit } = this.props; 
 

 
    return (
 
     <div> 
 
     This is a test form. 
 
     <div> 
 
      <form onSubmit={handleSubmit(this.formSubmit.bind(this))}> 
 
      <Field name="firstField" component="input" type="text" /> 
 
      <button type="submit">Submit</button> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 

 
} 
 

 
TestForm = reduxForm({ 
 
    form: 'testingForm' 
 
})(TestForm); 
 

 
export default TestForm;

私も、文字通りコピーして公式Reduxの形式のドキュメントからの例を貼り付け:http://redux-form.com/6.0.2/docs/MigrationGuide.md/とIを以下のコードは、私が問題を特定しようとするのはとても簡単なものを作成し、ありますそれでも同じ問題が発生します。今数時間これを理解しようとしています。それはreduxまたはredux形式のバージョンかもしれませんか?

私はredux v3.5.2とredux-form v6.2.1を使用しています。

助けていただければ幸いです!

答えて

1

私は同じ問題がありました。原因は、私が使用していた減速機のリストにformReducerを追加できなかったことです。修正するには、私は追加:

import { reducer as formReducer } from 'redux-form' 
const RootReducer = combineReducers({ 

... 

    form: formReducer  // <---- Mounted at 'form' 
}) 
+0

うん、これだった!共有ありがとう! –

+0

うん!毎回私を捕まえる! – Intellidroid

1

私はあなたがreact-redux文書を調べる必要があると思います。このコンポーネントは、<Provider store={store}>コンポーネント内に配置する必要があります。おそらくあなたはこのファイルの外でそれをやっていて、ちょうど有益であるために店の初期化を含んでいたでしょうか?

+0

エリックありがとう!あなたが提供した提案は、私がレポで持っていた他のファイルを見てくれました。私の主レデューサーファイルからrootReducerのインポートを誤って削除したことが判明しました。これはそれを修正しました! –

関連する問題