文本字段保持为空

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

您在 "functional component" renderField 中使用了 input、meta 和另一个 ...props，但是 renderField props 参数被命名为 field 并且没有在任何地方使用。

你应该这样改变renderField：

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

UPD

redux-form Basic Usage Guide 说：

The redux store should know how to handle actions coming from the form components. To enable this, we need to pass the formReducer to your store. It serves for all of your form components, so you only have to pass it once.

所以你应该将 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)

文本字段保持为空

Text field stays empty

redux-form

react-toolbox