web-dev-qa-db-ja.com

React Formik：カスタムonChangeおよびonBlurの使用方法

私は formik 反応用のライブラリから始めていますが、小道具handleChangeとhandleBlurの使用法がわかりません。

ドキュメント によると、handleBlurは<Formik/>の小道具として設定でき、<input/>に手動で渡す必要があります。

私はそれを試しましたが、成功しませんでした:(私はより明確にするためにhandleBlurに関するコードを保持しています）

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>}
  />;

このアプローチの何が問題になっていますか？ handleBlurとhandleChangeは実際にどのように使用されることになっていますか？

javascriptformsreactjs
24
Nicolas Marshall

Blurイベントはフィールドレベルでのみ有効であるため、handleBlurから最初のFormikを削除し、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
        ...
    }}
/>

https://github.com/jaredpalmer/formik/issues/157 を参照してください

24
Rico Chen