小编典典

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

reactjs

我正在使用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)

该组件是安装在“表单”上的Redux表单,正在运行。

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

从状态form.formName.values获取表单值并将其发送到我的Display组件的一种好方法是什么?

我尝试过的事情:

  • App 连接到商店和 mapStateToProps (form.formName.values),然后将其作为道具传递给Display。但这会引发错误,因为直到用户键入任何内容,表单状态中的值才存在。

  • 使用List组件内部的redux-form提供的 getFormValues (’formName’)函数,但它返回一个函数或未定义:

伊莱姆

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

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


阅读 397

收藏
2020-07-22

共1个答案

小编典典

尝试使用

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

代替。至少这就是在v5中的工作方式,尽管在那里调用了方法getValues而不是getFormValues

编辑:快速浏览一下看来在v6中的文档后,您将必须使用formValueSelectorhttp : //redux-
form.com/6.0.0-rc.3/examples/selectingFormValues/

2020-07-22