web-dev-qa-db-fra.com

Comment passer un nom de formulaire dynamique sous forme redux?

Im essayant d'utiliser ce code pour passer un nom de formulaire dynamique dans reduxForm.

Voici le code que j'ai trouvé:

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

De cet article: https://github.com/erikras/redux-form/issues/603#issuecomment-254271319

Mais je ne suis pas vraiment sûr de ce qui se passe.

Voici comment je le fais actuellement:

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

export default connect(mapStateToProps)(CityStateZip);

Mais je voudrais pouvoir le passer en utilisant des accessoires, comme ceci:

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

export default connect(mapStateToProps)(CityStateZip);

Mais quand j'essaye, il se plaint de ne pas savoir ce que sont les accessoires - parce que je pense que cela sort du cadre de la fonction ci-dessus.

Est-ce que quelqu'un peut m'aider?

javascriptreactjsreduxredux-form
21
jrutter

Le composant parent qui appelle le composant FormAddress doit envoyer le nom du formulaire dans les accessoires en tant que 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.
});

Cela fonctionne pour moi.

28
Parameshwar Ande

Cet extrait utilise essentiellement la fonction compose de la bibliothèque redux. Voici quelque chose que vous pouvez essayer ...

<FormAddress name="shippingAddress" />

Donc, dans votre components/FormAddress.js fichier

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

J'espère que cela t'aides!

20
jpdelatorre