не может вводить поля ввода при использовании материала-ui-redux-form из-за повторной визуализации

Question

Я использую материал-ui с сокращением. По какой-то причине я не могу вводить поля ввода, когда я следую примеру, указанному в http://redux-form.com/6.2.0/examples/material-ui/.

После использования хром инструмент перевождь Dev Я заметил, что состояние входов меняется, когда я печатаю, но затем он вновь делает весь компонент всякий раз, когда что-то напечатанное, что делает его , кажется, что ничего не набираясь. Как ни странно, это происходит только тогда, когда я использую компонент 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: {} 
    } 
} 

Если вам нужно использовать другое имя, отличное от form, вам необходимо указать getFormState(state) - reduxForm() декоратор.