web-dev-qa-db-fra.com

Comment réinitialiser la valeur initiale sous forme redux

J'utilise redux-form. Je montre les valeurs initiales dans les champs de saisie de l'état. Lorsque je clique sur réinitialiser, le champ de saisie affiche toujours les valeurs initiales.

Comment réinitialiser le champ de saisie?

Voici mon code:

const mapStateToProps = (state) => {
    return {
        initialValues: {
            name:state.userInfo.data.name,
            email:state.userInfo.data.email,
            phone:state.userInfo.data.phone,
            city:state.userInfo.data.city.name,
        }
    };
}

C'est ainsi que j'appelle la valeur initiale dans le champ de saisie.

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div>
        <input className="form-control control_new" {...input} placeholder={label} type={type}/>
    {touched && ((error && <span>{error}</span>))}
    </div>
)

<Field type="text" {...name} name="name" component={renderField} label="Enter Your Name" />

Merci

reactjsreduxredux-form
14
Sunil tc
import {reset} from 'redux-form';

...

dispatch(reset('myForm'));  // requires form name
12
Harsha W

TLDR: définissez enableReinitialize: true sur votre formulaire

J'ai eu ce même problème récemment et suis tombé sur ce post, sans qu'aucune des réponses ne fonctionne. Enfin trouvé la solution alors j'espère que cela aidera quelqu'un d'autre. le problème est que les valeurs initiales ne sont pas réinitialisées lorsque vous réinitialisez le formulaire. voici un problème github demander à ce sujet, et voici le documentation actuelle à ce sujet

14
John Hooper

La réponse de Harsha est correcte, mais vous pouvez également appeler this.props.reset() , qui connaît déjà le nom de votre formulaire, depuis l'intérieur de votre composant de formulaire décoré.

Vous pouvez le voir en action sur le bouton "Effacer les valeurs" dans le Exemple simple .

14
Erik R.

Lorsque vous cliquez sur le bouton d'effacement, appelez une fonction différente comme suit.

onClick={this.onClearChanges}

Passez les valeurs initiales à la fonction de cette façon, et comme tout le monde l'a mentionné, n'oubliez pas de définir enableReinitialize: true.

onClearChanges = () => {
  const { reset, onClearChanges, InitialValues } = this.props;
  reset();
  onClearChanges(InitialValues);
};
2
Ghanashri M

Il est également possible de réinitialiser l'intérieur de votre constructeur si vous n'avez pas de bouton avec une méthode à appeler.

J'utilise un Drawer Navigator pour naviguer vers différents écrans (pas un bouton cliquable avec une méthode onClick) donc j'ai dû réinitialiser

constructor(props) {
  super(props);
  this.props.reset(); //<-- this
}

à l'intérieur du premier composant pour gérer cette forme redux spécifique, puis je mets

enableReinitialize: true

pour cette forme.

0
Sam King