3
votes

Passer des valeurs à l'état depuis formik

J'utilise formik pour les formulaires de mon application react.

class myComponent extends Component {
  constructor(props) {
    this.state = {
      inputData: {}
    }
  }

render() {
  return(
    <Formik>{({ errors, handleChange, values }) => (
      console.log(values);
      <Field type="text" name="address" onChange={handleChange} />
   )}
   </Formik>
  )
}
}

La question: comment puis-je transmettre des valeurs à l'état?

reactjs formik

1 commentaires

vous pouvez utiliser la méthode onchange personnalisée et la définir sur l'état

3 Réponses :

0
votes

Vous pouvez faire une méthode handleChange sur votre composant de classe comme ci-dessous:

class myComponent extends Component {
  constructor(props) {
    this.state = {
      inputData: {}
    }
  }

  handleChange = (event) => {
     this.setState({
       inputData: event.target.value
     });
  }

  render() {
    return(
      <Formik>
      {({ errors, handleChange, values }) => {
          console.log(values);
          return(
            <Field type="text" name="address" onChange={this.handleChange} />
          );
      }}
     </Formik>
    );
  }
}

3 commentaires

C'est une mauvaise solution pour mon cas, car si je change de méthode handleChange, je devrai définir la fonction de validation. Il y a beaucoup de formulaires dans mon application, donc je n'ai besoin que d'une seule fonction de validation par défaut

vraiment il n'y a pas une telle méthode pour passer des valeurs à l'état? ou juste hors du Formik

Eh bien, pour la validation, vous pouvez utiliser la bibliothèque Yup comme indiqué dans les exemples Formik, pour moi, c'est le moyen le plus simple de valider les entrées. Parce que le Formik ne transmet que les valeurs de l'attribut values dans les enfants en tant que fonction, est le seul moyen d'obtenir les valeurs à valider. L'utilisation de la méthode onChange est une meilleure pratique car vous pouvez valider lorsque l'utilisateur modifie l'entrée, en transformant les messages de validation en temps réel pour une meilleure ux. Essayez d'utiliser Yup sur Formik comme indiqué sur ici . Vous pouvez également utiliser la validation sur onSubmit .

2
votes

Je pense que la meilleure pratique recommandée est de n'utiliser que l'état Formik afin d'éviter tout effet secondaire d'avoir l'état stocké dans 2 emplacements (Formik + l'état du composant). Je cherchais également à réaliser ce que vous vouliez et j'ai trouvé le composant suivant - https://github.com/jaredpalmer / formik-effect - cela vous permettra de décorer la fonction handleChange . Cependant, après avoir lu le README de ce composant, j'ai décidé de n'utiliser que l'état Formik et de transmettre ses valeurs à toute fonction nécessitant des valeurs dans cet état.

Pour transmettre les valeurs à une fonction, j'ai utilisé le modèle suivant:

class Example extends Component {
    handleValues(values) {
        // Do something with values
    }

    render() {
        return (
            <Formik>
                ({values}) => {<button onClick={() => this.handleValues(values)}>Do something</button>}
            </Formik>
        );
    }
}

0 commentaires

0
votes

Si vous n'avez pas besoin des changements d'état lors de leur saisie, je dirais que la meilleure option serait d'utiliser la fonction onSubmit pour mettre à jour votre état. Cela signifie également qu'il aura passé la validation avant que l'état n'ait été mis à jour. Il semble que vous ayez une fonction de validation par défaut, donc vous pouvez également ajouter le prop validate et l'utiliser pour appeler votre validateur.

class myComponent extends Component {
  constructor(props) {
    this.state = {
      inputData: {}
    }
  }

  render() {
    return(
      <Formik
        initialValues={values}
        onSubmit={(values) => {
          // Set updated state here
        }}
        render={({
            submitForm
          }) => (
          <form onSubmit={submitForm}>
            <Field type="text" name="address" onChange={handleChange} />
            <button type="submit">Submit</button>
          </form>
        )}
      />
    )
  }
}

0 commentaires