2017-02-17 6 views
0

私はこの問題を抱えています。入力欄には何も入力できません。私はこれを使用するimport {Field,reduxForm} from "redux-form"; しかし、もう一度失敗します。これは単純なフィールドです。私はすでにreduxフォームについてこのlinkを読んでいます。特別なコードはなく、簡単に適用することができますが、私はブラウザにそれを再生します。私はその問題を抱えています。Reduxフィールドには入力しません。

import * as React from 'react'; 
import {Field,reduxForm} from "redux-form"; 
import {connect} from 'react-redux'; 

class TodoForm extends React.Component<any,any>{ 

    render(){ 
     return (
      <form> 
       <div> 
        <label htmlFor="firstName">First Name</label> 
        <Field name="firstName" component="input" type="text"/> 
       </div> 
       <div> 
        <label htmlFor="lastName">Last Name</label> 
        <Field name="lastName" component="input" type="text"/> 
       </div> 
       <div> 
        <label htmlFor="email">Email</label> 
        <Field name="email" component="input" type="email"/> 
       </div> 
       <button type="submit">Submit</button> 
      </form> 
     ); 
    } 
} 

const TodoFormContainer = reduxForm({ 
    form: 'todo' // a unique name for this form 
})(TodoForm); 

export default connect()(TodoFormContainer); 

私は何かを見逃しましたか?

+0

「再び失敗」良いエラーの説明ではありません。より具体的にしてください。 –

+0

私はたくさんのテストを行い、それらのインポートを追加しました。実際には、私のコンソールには何も表示されず、空ではありません。それは私の問題です。私はそれを辿ることはできません。 – user3818576

+0

通常、入力フィールドに入力できない場合は、 'onChange'ハンドラがありますが、' value'への更新はありません。なぜあなたは 'connect'を追加しましたか?リンクされた例では、これは必須ではありません。 –

答えて

1

私は一度同じ問題を抱えていました。私はその理由を覚えていたよう下図のように、あなたが)(combineReducersでformReducerを追加しなかったことである:

import { createStore, combineReducers } from 'redux' 
import { 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) 
関連する問題