带有 formValueSelector 的多个 Redux 表单 [英] multiple Redux-form with formValueSelector

问题描述

我正在尝试创建多个具有可靠下拉菜单的表单.根据下拉列表 1 上的选择，显示一些字段并填充另一个下拉列表.

I'm trying to create multiple forms that have dependable dropdowns. Based on selection on dropdown1, some fields are shown and another dropdown is populated.

要实现多个表单，我必须传递一个唯一的表单键，例如:

To achieve the multiple forms, I have to pass a unique form key such as:

panels.map(panel =>
  <PanelForm key={panel.uuid} form={`PanelForm_${panel.uuid}`} />
)

但是，要连接到状态以进行更改，我必须使用 redux formValueSelector，它需要将其设置为传递的动态表单名称，但我不知道如何在此处传递它...

However, to connect to state for changes, I have to use the redux formValueSelector which requires to set it to the form name passed which is dynamic and I don't know how to pass it here...

const selector = formValueSelector('PanelForm_XXXX')
                                    ^^^^^^^^^^^^^^
const FormConnectDecorator = connect((state) => {
  const category = selector(state, 'category')
  return {
    category,
  }
})(Form)

const FormDecoratedComponent = reduxForm()(FormConnectDecorator)

我需要将表单连接到 redux 状态以读取类别值，但似乎无法将正确的动态表单名称值传递给它.

I need to connect the form to redux state to read category value but can't seem to pass the correct dynamic form name value to it.

推荐答案

浏览了几下，由于 formValueSelector 返回了一个函数，解决方案是在 mapStateToProps 中使用它.在 https://github.com/erikras/redux-form/issues/上感谢 rizedr1987

After a bit more browsing, as formValueSelector returns a function, the solution is to use it in mapStateToProps. Credits to rizedr on https://github.com/erikras/redux-form/issues/1987

const mapStateToProps = (state, initialProps) => {
  return {
    category: (formValueSelector(initialProps.form))(state, 'category'),
  };
};
const FormConnectDecorator = connect(mapStateToProps)(Form)

const FormDecoratedComponent = reduxForm()(FormConnectDecorator)

export default FormDecoratedComponent

@Mods - 如果您愿意，请随时删除此问题.答案已存在于 redux 形式的 github 关闭问题中，上面提供了链接.

@Mods - Feel free to delete this question if you will. Answer already exists in redux-form github closed issues, link provided above.

这篇关于带有 formValueSelector 的多个 Redux 表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！