Formik 3 アルファ版

本日、Formik v3 アルファ版の最初のリリースを公開しました。以下のコマンドでインストールできます。

 npm install formik@next

このブログ記事を書いた理由は、小さな破壊的変更があるためです。この変更は、通常の非推奨通知のように事前に警告することが、その性質上残念ながら不可能です。

しかし、悪いニュースをお伝えする前に、まずは良いニュースをお伝えしましょう。

新しい `parse`、`format`、`formatOnBlur` props！

新しいアルファ版リリースには、`getFieldProps`、`<Field>`、`useField()` に新しい `parse`、`format`、`formatOnBlur` props が追加されました。これらの props により、入力マスキング（入力の生の値の形式を変更して、ユーザーに特定の方法で表示する手法。例：電話番号 (917) 555-1234 やテキストベースの日付 10/2020）の実装がはるかに容易になります。TypeScript ユーザー向けに、新しい型の定義を以下に示します。

1 interface FieldConfig<V> {
2   // ...omitted for brevity
3 
4   /**
5    * Function to parse raw input value before setting it to state
6    */
7   parse?: (rawInput: string, name: string) => V;
8 
9   /**
10    * Function to transform value passed to input
11    */
12   format?: (value: V, name: string) => any;
13 
14   /**
15    * Should Formik wait until the blur event before formatting input value?
16    * @default false
17    */
18   formatOnBlur?: boolean;
19 }
20 
21 // ...elsewhere...
22 
23 const [field] = useField({ name: 'phone', parse: rawInput => ... })
24 <Field name="phone" parse={rawInput => ... } />
25 <input {...formikProps.getFieldProps({ name: 'phone', parse: rawInput => ... }) />

また、`[format-string-by-pattern](https://www.npmjs.com/package/format-string-by-pattern)` パッケージを使用して、さまざまな電話番号入力マスクを作成する完全な例を以下に示します。最初の入力では、9999999999 と入力しても、入力値（および Formik の内部値）は 999-999-9999 になります。素晴らしいですね！

https://codesandbox.io/s/github/jaredpalmer/formik/tree/next/examples/format-string-by-pattern?fontsize=14&hidenavigation=1&theme=dark&file=/index.js

*プロのヒント: 私は直感的な API を作ることにこだわっており、`parse` と `format` は覚えにくいことを認識しています。私が使っている/頭の中で言っているコツは次のとおりです。「format」→「from」のように聞こえる→「from Formik」→ Formik から入力へ。繰り返しますが、これはアルファ版なので、混乱を招く場合は、これらを名前変更します。*

破壊的変更

この新しい動作をサポートするために、`formikProps.getFieldProps()` から返される `onChange` および `onBlur` ハンドラの動作方法に破壊的変更を加える必要がありました。これは、`useField()` および `Field` にも影響します。

以前は、これらの `onChange` および `onBlur` メソッドは、`formikProps.handleChange` および `formikProps.handleBlur`（`useFormik()` またはレンダー prop `<Formik>` または `withFormik` によって返される）と同じでした。ただし、3.0.0-next.0 以降、これらのメソッドの動作はそれぞれ異なります。

`getFieldProps`、`useField`、または `<Field>` のレンダー prop から返される場合、`onChange` および `onBlur` は既に指定されたフィールドにスコープされており、React の合成イベントまたは任意の値を受け入れることができます。 `handleChange` や `handleBlur` のようにカリー化することはできなくなりました。

例

有効な例と無効な例の具体的な例を以下に示します...

引き続き機能しますが、`parse`、`format`、`formatOnBlur` はサポートされていません。

1 export const MyReactNativeForm = props => (
2   <Formik
3     initialValues={{ email: '' }}
4     onSubmit={values => console.log(values)}
5   >
6     {({ handleChange, handleBlur, handleSubmit, values }) => (
7       <View>
8         <TextInput
9           onChangeText={handleChange('email')} // curried
10           onBlur={handleBlur('email')} // curried
11           value={values.email}
12         />
13         <Button onPress={handleSubmit} title="Submit" />
14       </View>
15     )}
16   </Formik>
17 );

機能しなくなりました

1 export const MyTextField = props => {
2   const [field] = useField(props);
3   const onChange = e => {
4     e.persist();
5     if (e.target.value === 'foo') {
6       // Using the curried version of onChange,
7       // effectively equivalent to setFieldValue() no longer works
8       field.onChange(props.name)('bar');
9     } else {
10       field.onChange(e);
11     }
12   };
13   return <input {...field} onChange={onChange} />;
14 };

代わりに、次のようにすることができます...

1 export const MyTextField = props => {
2   const [field] = useField(props);
3   const onChange = e => {
4     e.persist();
5     if (e.target.value === 'foo') {
6       // You can now just set the value
7       field.onChange('bar');
8     } else {
9       // Or pass an event
10       field.onChange(e);
11     }
12   };
13   return <input {...field} onChange={onChange} />;
14 };

通常、この小さな変更はメジャーバージョンアップを引き起こすことはありませんが、`onChange` メソッドをカリー化しているのか、文字列引数を値として設定しようとしているのかがわからないため、警告を発して問題を防ぐことができません。 🤷‍♂️

今後の予定

Formik v3 の主な目標は、パフォーマンス、人間工学、およびアクセシビリティを向上させることですが、実現しなかった React hooks に関する特定の賭け（コンテキストセレクターなど）から回復することも目的としています。残念ながら、目標を達成するためには、Formik ファミリーにいくつかの破壊的変更や新しいコンポーネントを導入する必要があります。計画では、今後数週間でこれらの変更を `next` ブランチにロールアウトし、名前について少し議論し、既存のコンポーネントの一部を独自のパッケージ（`prop-types` など）に分割するか、コードモッドを作成して移行パスを自動化するかを決定します。いずれにせよ、Formik は高速化しています...長年の課題であった、大幅な高速化です。

リソース

コミュニティ

Formium について

ニュースレターを購読する

最新の Formik のニュース、記事、リソースが受信トレイに送信されます。