Question

我使用的是redux-form 6.0.0-rc.5，我正在尝试显示用户输入的表单值。

但是，我希望从另一个组件显示这些值，而不是redux表单本身。

所以，我简化的App架构就是这样：

<App />              -> (main component -container ?-)
  <List />           -> (connect to form values and pass them down)
    <Elem />         -> (display form value)
  <Form />           -> (enter form values)

该组件是一种以＃形式安装的还原形式。并且正在工作。

Form = reduxForm({
  form: 'formName'
})(Form)

获取表单值（来自state form.formName.values）并将它们发送到我的Display组件的好方法是什么？

我尝试过的事情：

将应用连接到商店， mapStateToProps （form.formName.values），然后将其作为道具传递给展示广告。但它会抛出一个错误，因为在用户键入任何内容之前，表单状态中不存在值。
使用list组件内的redux-form提供的函数 getFormValues （＆＃39; formName＆＃39;），但它返回一个函数或未定义：

ELEM

const Elem = ({ name }) => (
  <li>{name}</li>
)

列表

const List = ({ values }) => (
  {values.map(value => <Elem name={value.name} />)}      
)

List = connect(
  state => ({
    values: getFormValues('formName')
  })
)(List)

必须有一些我缺少的东西，或者我仍然无法正确理解它是使用redux-form还是redux本身......我希望有人能够启发我！

谢谢你，祝你有个美好的一天。

Answer 1

尝试使用

List = connect(
  state => ({
    values: getFormValues(state.form.formName)
  })
)(List)

代替。至少这是它在v5中的工作方式，尽管该方法被称为getValues而不是getFormValues。

编辑：快速浏览v6中的文档后，您将不得不使用formValueSelector：http://redux-form.com/6.0.0-rc.3/examples/selectingFormValues/

Answer 2

formValueSelector()没有必要。

您也可以直接将其作为财产访问。

List = connect(
  state => ({
    formValues: {
       id: state.form.formName.values.id
    }
  })
)(List)

与

相同

List = connect(
  state => ({
    formValues: {
       id: formValueSelector('formName')(state, 'id')
    }
  })
)(List)

Answer 3

我遇到了同样的问题。显然，＆＃39;价值观＆＃39;是redux-form中保存的名称。使用Iurii Budnikov建议我设法解决了问题 - 只需更改“＆＃39;值”中的变量名称即可。联系电话中的其他内容：

List = connect(
  state => ({
    formValues: getFormValues(state.form.formName)
  })
)(List)

Answer 4

从redux-form 6.0.0开始（7.0.0中仍然相同），您可以使用函数formValueSelector()从应用程序中的任何redux表单中选择值：{ {3}}

import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';

const selector = formValueSelector('formName');

List = connect(
  state => ({
    name: selector(state, 'name')
  })
)(List)

redux-form：如何在另一个组件上显示表单值

4 个答案: