少なくとも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}
/>
<input
type="reset"
value="Reset"
onClick={props.handleReset}
disabled={!props.dirty || props.isSubmitting}
/>
</Form>
)}
</Formik>
結論
Formikは、フォームを作成するための使い慣れたレンダリングプロップベースのアプローチを提供します。
通常作成する冗長なボイラープレートとステートメント管理ロジックのほとんどは、フォームでかなり複雑な状態管理を実行するのに十分な電力を内部で提供しながら、適切に処理されます。
この記事のコードを試してみたい場合は、CodeSandboxで確認できます。
乾杯!