React での非同期フォーム送信をマスターする: ステップバイステップ ガイド

React での非同期操作の処理は、迷路をナビゲートしているように感じることがあります。一般的な課題の 1 つは、すべての検証チェックが正常に完了した場合にのみフォームの送信を続行するようにすることです。

この投稿では、React での非同期フォーム送信を管理するための堅牢なソリューションについて詳しく説明します。プロセスを明確なステップに分割し、各段階を説明するコード スニペットを追加します。

課題を理解する
複数のフィールドがあり、それぞれが検証を必要とするフォームを想像してください。フィールドが空であるか無効なデータが含まれている場合、フォームが送信されないようにしたいと考えています。

解決策: 段階的なアプローチ
状態管理:

状態変数を使用して、フォーム データ、検証エラー、送信ステータスを管理します。

const [sessionName, setSessionName] = useState('')
const [startDate, setStartDate] = useState('')
const [endDate, setEndDate] = useState('')
const [errors, setErrors] = useState({})
const [submit, setSubmit] = useState(false)

検証ロジック:
各フィールドの検証チェックを実装します。

const onSubmit = (evt) => {
  evt.preventDefault()
  setErrors({})
  setSubmit(true)

  if (!sessionName) {
    setErrors(prev => ({ ...prev, name: 'Session name is required' }))
  }
  if (!startDate) {
    setErrors(prev => ({ ...prev, start_date: 'Start date is required' }))
  }
  // ... more validation checks ...
}

管理された送信の useEffect:
useEffect フックを使用して、フォーム送信ロジックを条件付きで実行します。

useEffect(() => {
  if (Object.keys(errors).length === 0 && submit) {
    // Proceed with form submission (e.g., call addSession())
  } else if (Object.keys(errors).length >= 1 && submit) {
    // Display error message
  }
  setSubmit(false) // Reset submit flag
}, [errors, submit])

条件付きレンダリング:
エラー状態に基づいてエラー メッセージを表示します。

<InputField
  label="Session Name"
  value={sessionName}
  onChange={setSessionName}
  error={errors.name}
/>

フラグのリセット:

処理後に送信フラグがリセットされていることを確認してください。

setSubmit(false)

利点:

• 同期: 検証後にのみフォームが送信されるようにします。

• 明確な分離: フォーム送信ロジックをエラー処理から分離します。

• ユーザー エクスペリエンスの向上: ユーザーに即時にフィードバックを提供します。

これらの手順に従うことで、React での非同期フォーム送信を自信を持って管理できます。このアプローチにより、クリーンなコードが促進され、ユーザー エクスペリエンスが向上し、データの整合性が保証されます。

以上がReact での非同期フォーム送信をマスターする: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。