web-dev-qa-db-fra.com

React Formik: comment utiliser onChange et onBlur personnalisés

Je commence avec la bibliothèque formik pour réagir, et je n'arrive pas à comprendre l'utilisation des propriétés handleChange et handleBlur.

Selon la documentation , handleBlur peut être défini comme accessoire sur un <Formik/>, et doit ensuite être passé manuellement au <input/>.

J'ai essayé cela, sans succès: (je garde le code sur handleBlur pour plus de clarté)

import React from "react";
import { Formik, Field, Form } from "formik";
import { indexBy, map, compose } from "ramda";
import { withReducer } from "recompose";

const MyInput = ({ field, form, handleBlur, ...rest }) =>
  <div>
    <input {...field} onBlur={handleBlur} {...rest} />
    {form.errors[field.name] &&
      form.touched[field.name] &&
      <div>
        {form.errors[field.name]}
      </div>}
  </div>;

const indexById = indexBy(o => o.id);
const mapToEmpty = map(() => "");

const EmailsForm = ({ fieldsList }) =>
  <Formik
    initialValues={compose(mapToEmpty, indexById)(fieldsList)}
    validate={values => {
      // console.log("validate", { values });
      const errors = { values };
      return errors;
    }}
    onSubmit={values => {
      console.log("onSubmit", { values });
    }}
    handleBlur={e => console.log("bluuuuurr", { e })}
    render={({ isSubmitting, handleBlur }) =>
      <Form>
        <Field
          component={MyInput}
          name="email"
          type="email"
          handleBlur={handleBlur}
        />
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>}
  />;

Quel est le problème avec cette approche? Comment les propriétés handleBlur et handleChange sont-elles censées être utilisées?

javascriptformsreactjs
24
Nicolas Marshall

Vous devez supprimer le premier handleBlur de Formik, car l'événement blur n'est valide qu'au niveau du champ et procédez comme suit dans votre élément Field:

<Field
    component={MyInput}
    name="email"
    type="email"
    handleBlur={e => {
        // call the built-in handleBur
        handleBlur(e)
        // and do something about e
        let someValue = e.currentTarget.value
        ...
    }}
/>

Voir https://github.com/jaredpalmer/formik/issues/157

24
Rico Chen