ReactとFormikを備えたティアフリーフォーム

getdocs

2年前

少なくとも1つのフォームを含まないWebアプリを作成することはめったにありません。多くの場合、アプリ全体は単なる一連のフォームです。これらの各フォームには、状態管理、イベントハンドラー、および多くの場合、ある種のクライアント側のデータ検証が必要です。 Formik は、これらすべてを小さなパッケージで、そして彼らが主張するように「涙なしで」行うことを目指しています。

入門

はじめに formik 経由してプロジェクトに追加する必要があります npm また yarn:

$ npm install --save formik
# or
$ yarn add formik

依存関係を追加したら、それを使用するプロジェクトに必ずインポートしてください。この記事では、両方を使用します Formik そしてその Form ヘルパーコンポーネント：

import { Formik, Form } from "formik";

The Form コンポーネントは標準のラッパーです form 自動的に配線する要素 onSubmit に接続されているハンドラー Formik コンポーネント、さらに多くの時間を節約します。

Formikコンポーネント

Formikの本当の魔法は Formik 成分。このコンポーネントは、フォームをまとめるために使用され、レンダリングプロップを介して状態値とハンドラーを公開します。

このコンポーネントは、プロパティを取得してデフォルト値を設定し、送信された値を検証し、送信を処理できます。

これがその方法です Formik コンポーネントは、後で作成する基本的なログインフォームを探します。

<Formik
  // Sets up our default values
  initialValues={{ email: "", password: "" }}

  // Validates our data
  validate={values => {
    const errors = {};

    if (!values.email) errors.email = "Required";

    if (
      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
    ) {
      errors.email = "You must supply a valid email address";
    }

    if (values.password.length < 8) {
      errors.password = "Passwords must be at least 8 characters";
    }

    if (values.email === values.password) {
      errors.password =
        "Your password shouldn't be the same as your email";
    }

    return errors;
  }}

  // Handles our submission
  onSubmit={(values, { setSubmitting }) => {
    // This is where you could wire up axios or superagent
    console.log("Submitted Values:", values);
    // Simulates the delay of a real request
    setTimeout(() => setSubmitting(false), 3 * 1000);
  }}
>
  {props => (
    <div>This is where your Form and form elements will go!</div>
  )}
</Formik>

yupやjoiのようなオブジェクトスキーマバリデーターに精通している場合は、スキップできます。 validate プロパティとパス validationSchema 代わりは。

フォームコンポーネント

前述のように、 Form コンポーネントは、 form のようなものを自動的に配線する要素 onSubmit ハンドラ。

通常どおりにフォームの入力をラップするために使用します。

<Formik>
  {props => (
    <Form>
      <label>My Input</label>
      <input type="text" />
    </Form>
  )}
</Formik>

入力の状態

すぐに使用できるFormikのrenderプロパティは、イベントハンドラーを公開して、フォーム入力への変更（「タッチ」されているかどうか、値、エラーなど）を管理します。

フォーム全体については、フォームが検証中か送信中か、およびフォームを簡単にリセットできるイベントハンドラーを確認できます。

props.values と props.errors フォームフィールドに対応するプロパティを持つオブジェクトです。

props.handleChange と props.handleBlur に渡すことができます onChange と onBlur 変更を追跡するためのプロパティと、入力が「タッチ」されたかどうか。

この「タッチされた」値は、ページの読み込み時ではなく、ユーザーが要素を操作した後にのみエラーを表示する場合に役立ちます（これはIMHOが推奨されます）。

props.dirty ユーザーがフォームを変更すると、trueに設定されます。

状態値 props.isValidating と props.isSubmitting ユーザーがプロセスのどの段階にあるかを知らせてください。ローダーを表示したり、フォームや個々のボタンを無効にしたりするのに最適です。

すべてをまとめる

正式にFormikedされた後の、電子メールとパスワードを使用した単純なログインフォームは次のようになります。

<Formik
  // Sets up our default values
  initialValues={{ email: "", password: "" }}

  // Validates our data
  validate={values => {
    const errors = {};

    if (!values.email) errors.email = "Required";

    if (
      !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
    ) {
      errors.email = "You must supply a valid email address";
    }

    if (values.password.length < 8) {
      errors.password = "Passwords must be at least 8 characters";
    }

    if (values.email === values.password) {
      errors.password =
        "Your password shouldn't be the same as your email";
    }

    return errors;
  }}

  // Handles our submission
  onSubmit={(values, { setSubmitting }) => {
    // This is where you could wire up axios or superagent
    console.log("Submitted Values:", values);
    // Simulates the delay of a real request
    setTimeout(() => setSubmitting(false), 3 * 1000);
  }}
>
  {props => (
    <Form>
      <label htmlFor="email">Email</label>
      <div>
        <input
          name="email"
          type="email"
          placeholder="Enter your account email"
          value={props.values.email}
          onChange={props.handleChange}
          onBlur={props.handleBlur}
          style={{
            borderColor:
              props.errors.email && props.touched.email && "red"
          }}
        />
        {props.errors.email && props.touched.email && (
          <div style={{ color: "red" }}>{props.errors.email}</div>
        )}
      </div>
      <label htmlFor="password">Password</label>
      <div>
        <input
          name="password"
          type="password"
          placeholder="Enter your account password"
          value={props.values.password}
          onChange={props.handleChange}
          onBlur={props.handleBlur}
          style={{
            borderColor:
              props.errors.password && props.touched.password && "red"
          }}
        />
        {props.errors.password && props.touched.password && (
          <div style={{ color: "red" }}>{props.errors.password}</div>
        )}
      </div>
      <input
        type="submit"
        value="Submit"
        disabled={props.isSubmitting}
      />
      &nbsp;
      <input
        type="reset"
        value="Reset"
        onClick={props.handleReset}
        disabled={!props.dirty || props.isSubmitting}
      />
    </Form>
  )}
</Formik>