redux-form :如何在另一个组件上显示表单值 [英] redux-form : How to display form values on another component

问题描述

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

I am using redux-form 6.0.0-rc.5 and I am trying to display the form values as they are entered by the user.

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

However, I want these values to be displayed from another component, not the redux form itself.

所以，我简化的应用架构应该是这样的:

So, my simplified App architecture would be like that :

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

该组件是一个安装到form"的 redux-form 并且正在运行.

The component is a redux-form mounted to 'form' and is working.

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

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

我尝试过的事情:

• 将 App 连接到商店和 mapStateToProps (form.formName.values)，然后将其作为道具传递给 Display.但它会引发错误，因为在用户输入任何内容之前，表单状态中不存在值.

• Connect App to the store and mapStateToProps (form.formName.values) then pass it down to Display as a prop. But it throws an error since values does not exist in the form state until the user has typed anything.

在 List 组件中使用 redux-form 提供的函数 getFormValues('formName') 但它返回一个函数或未定义:

Using the function getFormValues('formName') provided by redux-form inside the List component but it returns a function or undefined :

元素

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本身......我希望有人能够启发我！

There must be something I am missing or I still do not understand correctly whether it is with redux-form or redux itself... I hope someone will be able to enlighten me !

谢谢你，祝你有美好的一天.

Thank you and have a great day.

推荐答案

尝试使用

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

相反.至少在 v5 中它是这样工作的，尽管该方法被称为 getValues 而不是 getFormValues.

instead. At least that's how it worked in v5, although there the method was called getValues and not getFormValues.

快速查看文档后，似乎在 v6 中您必须使用 formValueSelector:http://redux-form.com/6.0.0-rc.3/examples/selectingFormValues/

After a quick look at the docs it seems in v6 you'll have to use a formValueSelector: http://redux-form.com/6.0.0-rc.3/examples/selectingFormValues/

这篇关于redux-form :如何在另一个组件上显示表单值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！