web-dev-qa-db-fra.com

Bouton Submit de l'extérieur de Redux Form v6.0.0

Cette question concerne Redux Form v6.0.0 (au moment de la rédaction de cette question, il s'agit de v6.0.0-alpha.15).

Comment obtenir le statut de validation de formulaire (tel que pristine, submitting, invalid) en dehors du composant de formulaire?

Laissez-moi vous donner un exemple. C'est la pseudo-structure "redux-form classique":

<Form(MyExampleForm)>
    <MyExampleForm>
        <input name="title" ... />
        <submit-button />

... où <submit-button> dans JSX ressemble à ceci:

<button type="submit" disabled={pristine || submitting || invalid} >Save</button>

Mais dans mon application, mon bouton d'envoi doit être en dehors du formulaire, placé à un endroit différent dans l'application (par exemple, dans l'en-tête de l'application, en haut de l'application).

  1. Comment puis-je obtenir ces pristine, submitting, invalid en dehors de Redux-Form? (Sans piratage vraiment méchant, si possible :-))
  2. Comment puis-je soumettre ce formulaire?
javascriptreactjsreduxredux-form
22
DHlavaty

Décorez simplement un autre composant avec le même nom de formulaire et vous aurez accès aux mêmes variables d'état. Vous pouvez également transmettre la fonction onSubmit à partir du parent et pouvoir soumettre toutes les valeurs de champ à partir de n'importe quel endroit défini, car elles proviennent toutes de l'état redux, et non du code HTML de l'instance de formulaire actuelle. (c'est une sorte de "hacky" façon, mais on se sent bien)

La fonction d'envoi est définie à partir du parent, elle n'est pas partagée à l'état, vous pouvez donc la différencier pour chaque instance.

class MySubmitForm extends React.Component {
    render() {
        return (
            <button
                onClick={this.props.handleSubmit}
            >
                {this.props.pristine ? 'pristine' : 'changed'}
            </button>
        )
    }
}

export default reduxForm({
    form: 'myFormName'
})(MySubmitForm);
10
Robert Simon

redux-form fonctionne avec React Redux pour permettre à un formulaire HTML dans React d’utiliser Redux pour stocker tout son état.

Si "en dehors de Redux-Form" signifie toujours une application redux, vous pouvez essayer de stocker ces propriétés dans cet état en envoyant certaines actions.

Dans les formulaires: vous détectez ce qui se passe (lorsque sa valeur est invalide, etc.), envoyez une action pour modifier un état, sur ce que vous désactivez un bouton.

4
MariuszJasinski

dans la dernière version du formulaire redux 6.0.2:

  1. il est possible d'accéder au formulaire état pristine, submitting, invalid via sélecteurs http://redux-form.com/6.0.2/docs/api/Selectors.md/

  2. il est possible d'exporter des créateurs d'actions redux-form http://redux-form.com/6.0.2/docs/api/ActionCreators.md/

3
Soson

Vous pouvez peut-être jeter un coup d'œil à l'API Instance de redux-forms. Il donne accès à une méthode submit() sur une instance de votre composant de formulaire décoré. Il existe également une propriété pristine Boolean et une propriété invalid Boolean disponibles (il existe également un request pour exposer également la propriété de soumission).

Il y a un exemple ici: http://redux-form.com/5.3.1/#/examples/submit-from-parent?_k=jgv0m4 (l'exemple concerne 5.3.1, mais le processus est similaire avec v6 en utilisant l’API d’instance)

L'idée de base est qu'en ajoutant un ref="myExampleForm" à votre formulaire, vous pouvez le transmettre avec this.refs.myExampleForm. Vous pouvez ensuite vérifier les propriétés de l'instance ou appeler la méthode submit() (ou toute autre méthode exposée).

2
Samuel Bolduc

Il est maintenant plus facile de faire cela. Vous pouvez appeler l'action Submit dans le composant autonome doté du bouton.

Voir cet exemple: https://redux-form.com/7.1.2/examples/remotesubmit/

2
FerA320

Si nous ne parlons que de soumettre le formulaire, vous devez alors fournir {withRef: true} option à votre fonction redux connect ().

Considérez le composant Row qui a le composant enfant RowDetail qui contient des informations à enregistrer dans Row. 

RowDetail dans ce cas pourrait être créé comme ceci:

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

const RowDetailForm = reduxForm({form: 'row-detail-form'})(RowDetail);

export default connect(mapStateToProps, null, null, {withRef: true})(RowDetailForm);

Ensuite, dans votre composant parent (Row), vous créez votre formulaire avec l'attribut ref: 

<RowDetailForm ref={'rowDetailForm'} .../>

Soumettre maintenant est 'facile': 

onSave() {
  this.refs.rowDetailForm.getWrappedInstance().submit();
}

Si nous parlons de propriétés de formulaire originales et autres, vous pouvez essayer de les obtenir à partir de votre fonction mapStateToProps dans votre composant parent. 

const rowDetailFormName = 'row-detail-form';
const mapStateToProps = (state) => ({
  rowDetailForm: state.form[rowDetailFormName]
});

Mais cette façon de faire semble un peu compliquée, car si je comprends bien, les API de formulaire redux ne permettent jamais d’accéder directement à tous les états de formulaire. S'il vous plait corrigez moi si je me trompe

1
Misha K

J'ai dû aborder ce problème récemment. J'ai fini par transmettre un rappel au formulaire, qui est invoqué chaque fois que les propriétés qui m'intéressent changent .. Je utilise la méthode du cycle de vie componentDidUpdate pour détecter les modifications 

Cela devrait fonctionner sur n'importe quelle version de la bibliothèque.

Voici un article avec un exemple de code - http://nikgrozev.com/2018/06/08/redux-form-with-external-submit-button/

0
Nikolay