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

Я использую 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 просто простой экран входа


person dalvacoder    schedule 21.11.2016    source источник


Ответы (1)


Попробуйте поменять редуктор на

const rootReducer = combineReducers({
  form: authReducer
})

ReduxForm ожидает, что ваша структура состояния redux будет

{
   form: {
      formName: {}
   }
}

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

person jpdelatorre    schedule 22.11.2016
comment
чувак...спасибо большое!! я потратил целый день на отладку этого. - person dalvacoder; 22.11.2016
comment
Рад помочь - person jpdelatorre; 22.11.2016