2016-11-06 14 views
1

redux-formをインストールしました。this templateを使用してレデューサーを取り付け、redux devtoolsで正常に動作していることを確認しました。Redux:フォーム入力フィールドが空白のまま

入力時にフローが良好であるが、各キーストローク後にフォーム値と入力が空であることがわかります。

コンソールにエラーはありません。私は手がかりを見つけることができません。

"react": "15.3.2", 
"redux-form": "^6.2.0", 

マイログインフォーム::

import React from 'react'; 
import { Field, reduxForm } from 'redux-form/immutable'; 


const renderField = ({ input, label, type, meta: { touched, error } }) => { 
    console.log(input); 
    return (
    <div> 
     <label>{label}</label> 
     <div> 
     <input {...input} placeholder={label} type={type} /> 
     {touched && error && <span>{error}</span>} 
     </div> 
    </div> 
); 
}; 

class FormLogin extends React.Component { // eslint-disable-line react/prefer-stateless-function 
    static propTypes = { 
    handleSubmit: React.PropTypes.func 
    }; 
    render() { 
    const { error, handleSubmit } = this.props; 
    return (
     <div> 
     <input type="text" name="ah1" /> 
     <form onSubmit={handleSubmit}> 
      <input type="text" name="ah2" /> 
      <div> 
      <Field id="username" name="username" type="text" component={renderField} label="Username" /> 

      </div> 
      <div> 
      <Field id="password" name="password" type="text" component={renderField} label="Password" /> 
      </div> 
      {error && <strong>{error}</strong>} 
      <button type="submit">Submit</button> 
     </form> 
     </div> 
    ); 
    } 
} 

export default reduxForm({ 
    form: 'FormLogin' 
})(FormLogin); 

答えて

1
私は小さな何かが欠けている

、...

マイパッケージ多分それは、コンポーネントのレンダリングですか多分それは反応したバージョンについてです

は誰かが答えを見つけるためにここに来ている場合に問題を発見しました。

これを修正するためのハックがあります。 あなたはここで詳細を見つけることができます。 https://github.com/mxstbr/react-boilerplate/issues/958

+0

ハックレスキュー形式は、反応不能なライブラリを直接使用するように思われます。http://redux-form.com/6.6.0/examples/immutable/ –

3

私にとっては、私は減速に、残念ながら、この困難なデバッグエラーにつながる例からの正確な名前を命名しませんでした。

例のようにレデューサーが 'form:formReducer'としてリストされていることを確認してください。

+1

あなたは私のヒーローです! –

関連する問題