具有formValueSelector的多个Redux表单

时间:2019-06-17 16:23:27

标签: reactjs redux redux-form

我正在尝试创建具有可靠下拉菜单的多种形式。根据对dropdown1的选择,将显示一些字段,并填充另一个下拉列表。

要实现多种形式,我必须传递一个唯一的形式密钥,例如:

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

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

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

const FormDecoratedComponent = reduxForm()(FormConnectDecorator)

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

1 个答案:

答案 0 :(得分:0)

更多浏览后,由于formValueSelector返回一个函数,解决方案是在mapStateToProps中使用它。归功于https://github.com/erikras/redux-form/issues/1987

上的rizedr
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已关闭问题中,上面提供了链接。