フォームライフサイクルの管理

フォームのライフサイクルイベントにフックして、送信前のユーザー入力をカスタマイズしたり、検証を実行したり、エラーを処理したりします。

Amplify Formsのライフサイクルダイアグラム

初期状態 - 入力フィールドは空であるか、提供されたデフォルト値に基づいて事前入力されます。

ユースケース: ユーザーがクリアまたはリセットボタンをクリックすると、この状態に戻ります。

onChange - フォームデータがユーザーによって変更されたときのイベント。

ユースケース: これを使用して、ユーザーの各入力後のフォームデータを取得します。

onValidate - カスタム検証のためのイベントフック。このイベントはonChangeの後にトリガーされます。

ユースケース: これを使用してコードを通じて検証ルールを拡張します。onValidateは非同期検証ルールもサポートしており、外部APIに対してフォーム入力を検証できます。

onSubmit - ユーザーが送信ボタンをクリックしたときのイベント。

ユースケース: フォームがデータモデルに接続されていない場合、このイベントハンドラーを設定してフォームデータを取得します。フォームがデータモデルに接続されている場合、これを使用してクラウドに保存される前に提供されたフォームデータをカスタマイズします。

onSuccess - フォームデータをクラウドに保存することが成功したときのイベント。

ユースケース: これを使用してフォームを閉じたり、フォーム送信が成功した後にユーザーを別のルートに移動させたりします。フォームがデータモデルに接続されている場合にのみ使用します。

onError - フォームデータをクラウドに保存することが失敗したときのイベント。

ユースケース: これを使用してエラーをログに記録し、検証ルールを改善する必要があるかどうかをさらに調査します。フォームがデータモデルに接続されている場合にのみ使用します。

onCancel - ユーザーがキャンセルボタンをクリックしたときのイベント。

ユースケース: これを使用してフォームを閉じ、フォームデータを保存しないようにします。

ユーザーがデータを入力するときのフォームデータの取得 - onChange

場合によっては、ユーザーがフォームを記入しているときにリアルタイムでフォームデータを取得したいことがあります。onChangeイベントはfieldsパラメータでフォームデータを提供します。

import { useState } from 'react'
import { HomeCreateForm } from './ui-components'
function App() {
  const [formData, setFormData] = useState()
    <HomeCreateForm onChange={fields => setFormData(fields)}/>

コードで検証ルールを拡張する - onValidate

onValidateイベントを使用して、コード内で検証ルールを拡張できます。詳細については、検証ルールを追加する方法をご覧ください。

フォームデータ送信を処理する - onSubmit

onSubmitはフォーム送信を処理するデフォルトの方法です。ユーザーが送信アクションボタンをクリックするたびにトリガーされます。

onSubmitハンドラーを使用して、フォームデータをクラウドに保存する前にカスタマイズできます。onSubmitハンドラーから返されたフォームデータがクラウドに保存されます。

たとえば、保存前にすべての文字列データをトリムする場合：

<HomeCreateForm
    onSubmit={(fields) => {
        const updatedFields = {}
        Object.keys(fields).forEach(key => {
            if (typeof fields[key] === 'string') {
                updatedFields[key] = fields[key].trim()
            } else {
                updatedFields[key] = fields[key]
        return updatedFields

フォームデータがクラウドに正常に保存されたときを処理する - onSuccess

onSuccessハンドラーを使用して、フォームデータが正常に送信された後にアクションを実行できます。以下の例は、フォームが正常に送信された後にフォームを非表示にします。

import { useState } from 'react'
import { HomeCreateForm } from './ui-components'
function App() {
  const [showForm, setShowForm] = useState(true)
    {showForm &&
      <HomeCreateForm onSuccess={() => {
        setShowForm(false) // フォームを非表示にする
      }}/>}

フォーム送信エラーを処理する - onError

送信プロセス中に追加のエラーが発生する可能性があります。onErrorハンドラーを使用してこれらのエラーをログに記録し、顧客にアラートを表示できます。

import { HomeCreateForm } from './ui-components'
function App() {
    <HomeCreateForm onError={(error) => {
      console.log(error)

ユーザーがキャンセルアクションボタンをクリックしたときを処理する - onCancel

ユーザーがキャンセルアクションボタンをクリックした場合、onCancelイベントを使用してフォームを非表示にするか、顧客を別のページにルートできます。

import { useState } from 'react'
import { HomeCreateForm } from './ui-components'
function App() {
  const [showForm, setShowForm] = useState(true)
    {showForm &&
      <HomeCreateForm onCancel={() => {
        setShowForm(false) // フォームを非表示にする
      }}/>}

フォームデータの検証