web-dev-qa-db-fra.com

Comment effacer certains champs du formulaire - Redux-Form

Je travaille sur une page comportant de nombreuses validations d'entrée et de nombreuses liaisons logiques et augmentant à chaque itération la taille de la page. Je dois donc trouver une solution magnifique et évolutive.

Imaginons que, lorsque l'utilisateur sélectionne une valeur dans la liste déroulante sous la forme «A», certains champs doivent être désactivés, certains champs doivent être effacés et certains champs initialisés avec des valeurs par défaut. Je peux changer un champ associé (sans règle de validation comme regexp ou lenght constrait) avec un peu de code comme

  this.props.dispatch(change('xForm','xField','xValue' ))

Mon problème est que lorsque je dois effacer plusieurs champs, 

Il est toujours bloqué par ma méthode de validation et l'opération d'effacement est infructueuse (Remarque: je suis supposé être comme ça mais pas comme ça)

. 

J'ai essayé quelques stratégies comme ci-dessous mais les champs y, z, w ont du texte, ce qui a déclenché la règle de validation et corrigé les erreurs. Ainsi, les entrées ont toujours des valeurs anciennes et non effacées.

    //Clear    
    this.props.dispatch(change('xForm','yField','' ))
    this.props.dispatch(change('xForm','zField','' ))
    this.props.dispatch(change('xForm','wField','' ))

Quelles sont les meilleures pratiques pour effacer les entrées ou attribuer des valeurs aux entrées sous la forme redux pour les pages qui ont des entrées très dépendantes.

Je fais des recherches depuis 2 jours mais je n’ai trouvé aucune solution optimale. (normaliseur de redux, utilitaires de forme de redux, etc.)

Merci.

reactjsreduxclearredux-form
14
Tugrul

Wow, c'est une logique compliquée. L'idéal serait d'utiliser l'adresse plugin() API pour modifier les valeurs du réducteur lorsque les autres valeurs de champ changent. C'est une API compliquée, car vous avez le contrôle total de tout gâcher dans le réducteur, mais vous avez une exigence compliquée.

Cependant, l'envoi de trois actions change() comme vous l'avez indiqué devrait également fonctionner correctement. Vous voudrez peut-être/devez untouch() également les champs s’ils contiennent des messages de validation Required que vous ne voulez pas afficher encore.

Il est toujours bloqué par ma méthode de validation et l'opération d'effacement échoue.

Pouvez-vous préciser ce que cela signifie, afficher une trace de pile ou une sortie d'erreur de la console?

3
Erik R.

Cela a fonctionné pour moi:

resetAdvancedFilters(){
        const fields = ['my','fields','do','reset','properly']
        for (var i = 0; i < fields.length; i++) {
            this.props.dispatch(change('formName',fields[i],null))
            this.props.dispatch(untouch('formName',fields[i]))
        }
    }
13
chickenchilli

En utilisant ce qui suit, il efface les multiples champs respectifs, ainsi que les erreurs éventuelles pour ces champs respectifs.

Fonction commune pour réinitialiser plusieurs champs.

import {change, untouch} from 'redux-form';

//reset the respective fields's value with the error if any after
resetFields = (formName, fieldsObj) => {
      Object.keys(fieldsObj).forEach(fieldKey => {

          //reset the field's value
          this.props.dispatch(change(formName, fieldKey, fieldsObj[fieldKey]));

          //reset the field's error
          this.props.dispatch(untouch(formName, fieldKey));

      });
}

Utilisez la fonction commune ci-dessus comme,

this.resetFields('userDetails', {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
});
6
Aniruddha Shevle

effacer plusieurs champs

import {change} from 'redux-form';

const fields = {name: '', address: ''};
const formName = 'myform';

const resetForm = (fields, form) => {
    Object.keys(fields).forEach(field => dispatch(change(form, field, fields[field])));
}

resetForm(fields,formName);
1
vijay

J'ai trouvé un meilleur moyen pour cela,

Nous pouvons utiliser initialize action creator of RF.

let resetFields = {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
}

this.props.initialize(resetFields, true); //keepDirty = true;

Si le paramètre keepDirty a la valeur true, les valeurs des champs actuellement modifiés sont conservées afin d'éviter d'écraser les modifications de l'utilisateur.

1
Aniruddha Shevle

là.

Regardons http://redux-form.com/6.0.0-alpha.4/docs/faq/HowToClear.md/

Pour la forme entière, nous pouvons utiliser 4 méthodes:

A) Vous pouvez utiliser l'API plugin () pour apprendre au réducteur redux-form à répondre à l'action envoyée lorsque votre soumission réussit.

B) Démontez simplement votre composant de formulaire

C) Vous pouvez appeler this.props.resetForm () à partir de votre formulaire une fois votre soumission réussie.

D) Vous pouvez envoyer reset () depuis n’importe quel composant connecté

1
SerzN1

Essayez d'utiliser la fonction dispatch dans le méta-objet avec la charge suivante:

meta.dispatch({
  type: '@@redux-form/CHANGE',
  payload: null,
  meta: { ...meta, field: name },
})

Cela devrait faire l'affaire pour n'importe quel domaine que vous voulez.

1
Zero