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

IT技术 reactjs redux react-redux redux-form
2021-04-24 16:43:26

我正在使用 redux-form 6.0.0-rc.5 并且我试图显示用户输入的表单值。

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

所以，我简化的应用程序架构将是这样的： 

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

该组件是一个安装到“表单”的 redux 表单并且正在工作。

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

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

我尝试过的事情：

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

  • 在 List 组件中使用 redux-form 提供的函数getFormValues ('formName') 但它返回一个函数或 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本身......我希望有人能够启发我！

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

4个回答

尝试使用

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/

formValueSelector() 没有必要。

您也可以将其作为属性直接访问。

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

与...一样

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

我有同样的问题。显然，'values' 是以 redux 形式保存的名称。使用Iurii Budnikov 的建议，我设法解决了这个问题——只需在连接调用中将变量名称从“值”更改为其他名称：

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

从 redux-form 开始6.0.0（在 中仍然相同7.0.0），您可以使用该函数formValueSelector()从应用程序中的任何 redux 表单中选择值：http : //redux-form.com/7.0.0/docs/api/FormValueSelector .md/ 

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

const selector = formValueSelector('formName');

List = connect(
  state => ({
    name: selector(state, 'name')
  })
)(List)
其它你可能感兴趣的问题
上一篇直线导轨使用什么润滑脂？ 下一篇3D打印机外壳使用硬纸板；硬纸板的温度等级是多少？