Как вы передаете динамическое имя формы в форме редукса?

Я пытаюсь использовать этот код для передачи имени динамической формы в reducexForm.

Вот код, который я нашел:

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);

Но я хотел бы иметь возможность передать его с помощью реквизита, например:

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

export default connect(mapStateToProps)(CityStateZip);

Но когда я пытаюсь это сделать, он жалуется, что он не знает, какие реквизиты - потому что я считаю, что это выходит за рамки вышеописанной функции.

Может кто-нибудь мне помочь?

Ответы

Ответ 1

Родительский компонент, вызывающий компонент FormAddress, должен отправить имя формы в реквизитах как 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.
});

Это работает для меня.

Ответ 2

Этот фрагмент в основном использует функцию 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);

Надеюсь, это поможет!