2
votes

Comment ajouter un bouton Effacer sur un champ de texte Formik

Je veux ajouter un bouton Effacer pour plus de commodité aux utilisateurs:

constructor(props) {
    this.emailInput = React.createRef();
}

<Field label="Email" name="email" ref={this.emailInput} onChange={onChange} component={TextField}/>

Mais obtenez ceci:

Attention: les composants de fonction ne peuvent pas recevoir de références. Les tentatives d'accès à cette référence échoueront.

reactjs formik ref

0 commentaires

3 Réponses :

1
votes

vous pouvez essayer de définir un bouton de réinitialisation dans votre formulaire, par exemple

<form>
 <Field label="Email" name="email" onChange={onChange} component={TextField}/>
 <input type="reset" value="Reset">
</form>

J'ai pris l'exemple ici , il doit réinitialiser toutes les entrées du formulaire

1 commentaires

@Maksym cela ne réinitialisera pas le formulaire Formik.

2
votes

Formik a une méthode intégrée appelée resetForm a > accessible comme les autres méthodes formik. Dans votre formulaire, vous avez probablement quelque chose comme

<Formik 
  initialValues={something}
  validationSchem={someSchema}
  render={(props) => {
    ...some form stuff
    <button type="button" onClick={() => props.resetForm()}>reset form</button>
    }
  }

/>

vous pouvez accéder aux accessoires formik dans cette méthode de rendu et faire ce que vous voulez avec eux:

<Formik 
  initialValues={something}
  validationSchem={someSchema}
  render={() => {
    ...some form stuff
    }
  }

/>

2 commentaires

merci mais à la recherche d'un utilisateur entré le bouton de suppression de texte X sur chaque champ de texte.

dans ce cas, vous pouvez utiliser la fonction setFieldValue avec le nom de votre champ

6
votes

Pour réinitialiser des champs particuliers, utilisez setFieldValue pour définir la valeur sur une chaîne vide.

setFieldValue: (field: string, value: any, shouldValidate ?: boolean) => void

Définissez impérativement la valeur d'un champ. Le champ doit correspondre à la clé des valeurs que vous souhaitez mettre à jour. Utile pour créer des gestionnaires de modification d'entrée personnalisés.

- Documentation Formik

Eg:

<Formik 
  initialValues={initialValues}
  ...
>
    {({ resetForm }) =>
        ...
        <button type="reset" onClick={resetForm}>
            Reset All
        </button>
        ...

Pour réinitialiser tous les champs, utilisez resetForm .

resetForm: (nextValues ?: Values) => void

Réinitialisez impérativement le formulaire. Cela effacera les erreurs et touchées , définissez isSubmitting sur false , isValidating sur false , et réexécutez mapPropsToValues avec les accessoires actuels de WrappedComponent ou ce qui est passé en argument.

- Documentation Formik

Eg:

<Formik 
  initialValues={initialValues}
  ...
>
    {({ setFieldValue }) =>
        ...
        <button type="reset" onClick={() => setFieldValue('fieldName', '')}>
            Reset This
        </button>
        ...

Codesandbox: https://codesandbox.io/s/7122xmovnq

0 commentaires