如何在 redux 表单中传入动态表单名称？

IT技术 javascript reactjs redux redux-form
2021-05-05 03:47:07

我尝试使用此代码将动态表单名称传递到 reduxForm。

这是我找到的代码：

let FormAddress = compose(connect((state, props) => ({form: props.form})), reduxForm({destroyOnUnmount: false, asyncBlurFields: []}))(ValidationForm);

来自这篇文章：https : //github.com/erikras/redux-form/issues/603#issuecomment-254271319

但我不确定发生了什么。

这就是我目前的做法：

const formName = 'shippingAddress';
const form = reduxForm({
  form: formName
});

export default connect(mapStateToProps)(CityStateZip);

但我希望能够使用props传递它，如下所示：

const formName = 'shippingAddress';
const form = reduxForm({
  form: props.form
  // validate
});

export default connect(mapStateToProps)(CityStateZip);

但是当我尝试这样做时，它抱怨它不知道 props 是什么 - 因为我相信它超出了上述函数的范围。

有人能帮我吗？

2个回答

调用FormAddress组件的父组件应该将 props 中的表单名称发送为props.form：

var formId="SomeId"
<FormAddress form={formId} />

// and in your FormAddress component have 
const form = reduxForm({
  //no need to put form again here as we are sending form props.
});

这对我有用。

该片段基本上使用了库中的compose函数redux。这是你可以尝试的东西......

<FormAddress name="shippingAddress" />

所以在你的components/FormAddress.js文件中

import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

class FormAddress extends React.Component { ... }

const mapStateToProps = (state, ownProps) => {
    return {
        form: ownProps.name,
        // other props...
    }
}

export default compose(
    connect(mapStateToProps),
    reduxForm({
        //other redux-form options...
    })
)(FormAddress);

希望这可以帮助！

其它你可能感兴趣的问题
上一篇为什么加热床很重要？ 下一篇在 react-datepicker 中更改语言环境