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

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

1. 初期状態 - 入力は空またはあなたが提供するデフォルト値に基づいて事前入力されています。

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

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

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

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

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

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

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

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

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

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

ユースケース: これを使用してエラーをログして、検証ルールが入力フォーマットの問題をキャッチするために改善する必要があるかどうかをさらに調査します。フォームがデータモデルに接続されている場合にのみ使用します。

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

ユースケース: これを使用してフォームデータを保存せずにフォームを閉じます。

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

場合によっては、ユーザーがフォームを入力しているときにリアルタイムでフォームデータを取得したいことがあります。onChangeイベントはfieldsパラメータでフォームデータを提供します。すべてのフォームアクションボタンを非表示にする場合は、onChangeを使用することをお勧めします（送信、キャンセル、クリア、リセット）。

import { useState } from 'react'
import { HomeCreateForm } from './ui-components'

function App() {
  const [formData, setFormData] = useState()

  return (
    <HomeCreateForm onChange={fields => setFormData(fields)}/>
  )
}

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

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

フォームデータ送信を処理する - 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
    }}
/>

import { useState } from 'react'
import { HomeCreateForm } from './ui-components'

function App() {
  const [showForm, setShowForm] = useState(true)

  return (
    {showForm &&
      <HomeCreateForm onSubmit={async (fields) => {
      const response = await fetch("/submit-home-data", {
        method: "POST",
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(fields) // Pass in form data
      })

      if (response.status === 200) {
        setShowForm(false) // Hide the form
      }
    }}/>}
  )
}

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

フォームがデータモデルに接続されている場合は、onSuccessフックを使用してフォームデータが正常に送信された後にフォームを閉じます。

import { useState } from 'react'
import { HomeCreateForm } from './ui-components'

function App() {
  const [showForm, setShowForm] = useState(true)

  return (
    {showForm &&
      <HomeCreateForm onSuccess={() => {
        setShowForm(false) // Hide the form
      }}/>}
  )
}

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

フォームがデータモデルに接続されている場合、送信プロセス中に追加のエラーが発生する可能性があります。onErrorハンドラーを使用してこれらのエラーをログし、顧客に警告を表示できます。

import { HomeCreateForm } from './ui-components'

function App() {
  return (
    <HomeCreateForm onError={(error) => {
      console.log(error)
    }}/>
  )
}

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

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

import { useState } from 'react'
import { HomeCreateForm } from './ui-components'

function App() {
  const [showForm, setShowForm] = useState(true)

  return (
    {showForm &&
      <HomeCreateForm onCancel={() => {
        setShowForm(false) // Hide the form
      }}/>}
  )
}