文本字段保持为空

Question

我正在尝试将React-Toolbox输入组件与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和另一个renderField，但renderField道具参数名为field并且不在任何地方使用。

您应该以这种方式更改renderField：

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

<强> UPD

redux-form Basic Usage Guide说：

  

redux商店应该知道如何处理来自表单组件的操作。要启用此功能，我们需要将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)