web-dev-qa-db-ja.com

React formik form validation：最初に送信ボタンを無効にする方法

以下は、Reactフォーム検証コードで、formikを使用しています。デフォルトでは、フォームが読み込まれたときに、送信ボタンを無効のままにしておきます。

import { useFormik } from "formik";
import * as Yup from "yup";

const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: ""
    },
    validationSchema: Yup.object({
      firstName: Yup.string()
        .max(15, "Must be 15 characters or less")
        .min(3, "Must be at least 3 characters")
        .required("Required"),
      lastName: Yup.string()
        .min(3, "Must be at least 3 characters")
        .max(20, "Must be 20 characters or less")
        .required("Required"),
      email: Yup.string()
        .email("Invalid email address")
        .required("Required")
    }),
    onSubmit: values => {
      handleSubmit(values);
    }
  });

私はこれを私のボタンで使用しようとしました：

 disabled={!formik.isValid}

しかし、実際に機能するのは、フォームを送信しようとした場合のみです。そのため、フォームを空白のままにして[送信]をクリックすると、すべての検証エラーが表示され、ボタンが無効になります。ただし、最初から無効にしておく必要があります。 documentation を確認しましたが、明らかなものはありませんでした。

reactjsvalidationformikyup
4
user8463989

Formikはフィールド値とエラーを追跡しますが、それらをユーザーに公開します。これは、以前はレンダープロップパターンを使用してformPropsを介して行われていましたが、現在はuseFormikフックによって返されるformik変数の一部のようです。

最初に定数の初期値を削除することをお勧めします。次に、formikのエラーオブジェクトにアクセスする必要があります。新しいフック構文を使用してこれを行ったことはありませんが、「formik.errors」が機能すると予想されるドキュメントを調べます（これはレンダープロップを使用してformProps.errorsで公開されています）。最後に、無効化された送信要求は、formik.valuesが初期値と等しいかどうかのチェックである必要がありますORエラーオブジェクトは空ではありません。

0
Jamie Shepherd