再レンダリングのためmaterial-ui-redux-formを使用しているときに入力フィールドに入力できません

Question

私はreduxでmaterial-uiを使用しています。何らかの理由で、http://redux-form.com/6.2.0/examples/material-ui/で提供されている例に従うたびに入力フィールドに入力できません。

chrome redux開発ツールを使用した後、入力時に入力の状態が変化していることがわかりましたが、タイプが入力されるたびにコンポーネント全体が再描画されるため、と表示されます。奇妙なことに、これは、例で使用されているように、Fieldコンポーネントを使用する場合にのみ発生します。私がmaterial-uiコンポーネントだけを使用している場合、フォームは入力を許可し、再レンダリングしません。私は自分のコンポーネントにコード全体を含めました。どんな助けでも大歓迎です！私は間違って何をしていますか？

import React, { Component } from 'react' 
import {Field, reduxForm} from 'redux-form' 
import { TextField } from 'redux-form-material-ui' 
import RaisedButton from 'material-ui/RaisedButton' 

class Login extends Component { 
    constructor (props) { 
    super(props) 
    this.handleFormSubmit = this.handleFormSubmit.bind(this) 
    } 
    componentDidMount() { 
    console.log(this.refs) 
    this.refs.username  // the Field 
     .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField 
     .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField 
     .focus()    // on TextField 
    } 
    handleFormSubmit ({ username, password }) { 
    console.log(username, password) 
    } 
    render() { 
    const { 
     handleSubmit, 
     pristine, 
     submitting, 
     input, 
     fields: { username, password } 
    } = this.props 
    return (
     <div className='loginWrapper'> 
     <form onSubmit={handleSubmit(this.handleFormSubmit)}> 
      <div id='loginNotch' /> 
      <h1 className='loginHeader'>Login</h1> 
      <div> 
      <Field 
       component={TextField} 
       name='username' 
       floatingLabelText='Username' 
       ref='username' withRef /> 
      </div> 
      <div> 
      <Field 
       component={TextField} 
       type='password' 
       name='password' 
       floatingLabelText='Password' 
       ref='password' withRef /> 
      </div> 
      <div> 
      <RaisedButton 
       label='Go' 
       primary /> 
      </div> 
     </form> 
     </div> 
    ) 
    } 
} 

// TODO: keep property names consistent with server 
export default reduxForm({ 
    form: 'login', 
    fields: ['username', 'password'] 
})(Login) 

更新：私はドキュメントを見て、エクスポートからフィールドを削除しましたが、まだ動作していません。

あなたはここにhttps://bitbucket.org/kvoth3/loanpayments.git それだけの簡単なログイン画面

Answer 1

が

const rootReducer = combineReducers({ 
    form: authReducer 
}) 

ReduxFormが

{ 
    form: { 
     formName: {} 
    } 
} 

の場合であるためにあなたのReduxの状態の構造を期待するあなたの減速を変更してみてくださいだから、プロジェクトのクローンを作成することができますform以外の別の名前を使用する必要がある場合は、getFormState(state)〜reduxForm()デコレータ。