redux-form - 文本字段保持空白

Question

我正在尝试将 React-Toolbox Input 组件与 Redux-Form 集成。但是，输入组件在键入时保持为空。我使用https://github.com/react-toolbox/react-toolbox/issues/1293作为集成指南。

import React from 'react'
import PropTypes from 'prop-types'

import { Field, reduxForm } from 'redux-form'
import Input from 'react-toolbox/lib/input'

const renderField = ({ input, meta, ...props }) => (
  <Input
    { ...input }
    { ...props }
    error={ meta.touched && meta.error } />
)

const Form = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    <Field
      name="myTextField"
      component={renderField}
      type="text"
    />
  </form>
)

Form.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
}

export default reduxForm({
  form: 'myForm',
})(Form)

这是使用react-toolbox 2.0.0-beta.12和redux-form 7.2.0

Answer 1

您在“功能组件”中使用input,meta和另一个，但props 参数已命名并且不在任何地方使用。...propsrenderFieldrenderFieldfield

你应该renderField这样改变：

const renderField = ({ input, meta, ...props }) => (
  <Input
    { ...input }
    { ...props }
    error={ meta.touched && meta.error }
  />
);

UPD

redux-form基本使用指南说：

redux store 应该知道如何处理来自表单组件的操作。要启用此功能，我们需要将 formReducer 传递给您的商店。它适用于您的所有表单组件，因此您只需传递一次。

因此，您应该将 formReducer 传递给您的商店：

import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

const rootReducer = combineReducers({
  // ...your other reducers here
  // you have to pass formReducer under 'form' key,
  // for custom keys look up the docs for 'getFormState'
  form: formReducer
})

const store = createStore(rootReducer)