ReactのContext APIを使用したフォーム管理の方法

まず、フォームのコンポーネントを作成します。以下は、簡単な例です:

import React, { useContext, useState } from 'react';
// コンテキストの作成
const FormContext = React.createContext();
// フォームのコンポーネント
function MyForm() {
  const [inputValue, setInputValue] = useState('');
  // 入力値を更新するハンドラー
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <FormContext.Provider value={inputValue}>
      <input type="text" value={inputValue} onChange={handleChange} />
      <FormSummary />
    </FormContext.Provider>
  );
}
// フォームのサマリーを表示するコンポーネント
function FormSummary() {
  const inputValue = useContext(FormContext);
  return <p>入力値: {inputValue}</p>;
}
export default MyForm;

上記の例では、FormContextというコンテキストを作成し、MyFormコンポーネント内で提供します。inputValueという状態変数とhandleChangeというハンドラー関数も定義されています。<input>要素の値とonChangeイベントに関連付けられたハンドラーを使用して、入力値の状態を更新します。

FormContext.Providerコンポーネントを使用して、inputValueをコンテキストに提供します。これにより、FormSummaryコンポーネント内でuseContextフックを使用して値を取得できます。FormSummaryコンポーネントでは、入力値を表示するだけの簡単な例を示していますが、実際のアプリケーションでは、この値を使用して他の処理を実行することもできます。

このようにして、FormContextを使用してフォームの状態や入力値をコンポーネント間で共有できます。必要に応じて、他のコンポーネントで同じコンテキストを使用し、フォームの状態を更新したり、表示したりすることもできます。

以上が、ReactのContext APIを使用してフォームを管理する方法の一例です。この方法を使用することで、フォームの状態を簡潔に管理し、コンポーネント間でのデータの共有を容易にすることができます。