由于重新渲染，使用 material-ui-redux-form 时无法输入输入字段

Question

我正在使用 material-ui 和 redux。出于某种原因，每当我按照 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 期望你的 redux 状态结构是

{
   form: {
      formName: {}
   }
}

如果您需要使用 form 以外的其他名称，您需要向 reduxForm() 装饰器提供一个 getFormState(state)。

由于重新渲染，使用 material-ui-redux-form 时无法输入输入字段

can't type in input fields when using material-ui-redux-form due to re rendering

reactjs

redux

material-ui

redux-form