ウェブサイト検索

React の useRef フックがアップロード成功後に入力フィールドをリセットするのにどのように役立つか

フォーム自体がクリーンアップされると、ユーザー エクスペリエンスが向上します。 useRef がアプリのこの部分でどのように重要な役割を果たし得るかを調べてください。

React を使用すると、一部の入力フィールドをリセットするのが他のフィールドよりも面倒に感じる場合があります。特に、ファイル入力は問題を引き起こす可能性がありますが、ファイルのアップロードが成功した後にリセットする必要があるのはまさにこれらのフィールドです。

ありがたいことに、useRef フックは簡単な解決策を提供します。アップロードが成功した後に useRef フックを使用してファイル入力フィールドをクリアする方法を学びます。

簡単なアップロードフォームの作成

useRef を使用してファイル入力フィールドをリセットする方法を示すために、画像を受け入れる入力フィールドを持つ単純な React フォームを作成します。

まず、useState フックを使用して selectedFile という名前の状態値を設定し、選択したファイルを追跡します。ユーザーがまだファイルを選択していないため、selectedFile の初期状態は null になります。

また、ユーザーがファイルを選択したときに selectedFile 状態を更新する handleFileChange というハンドラー関数を作成します。 handleSubmit という 2 番目の関数を追加します。これは、ユーザーがファイルをアップロードするときに状態をアップロードする必要があります。

import { useState } from "react";
function FileUploadForm() {
  const [selectedFile, setSelectedFile] = useState(null);
  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };
  const handleSubmit = (event) => {
    event.preventDefault();
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <label htmlFor="fileInput">Choose a file:</label>
        <input type="file" id="fileInput" onChange={handleFileChange} />
        <button type="submit">Upload</button>
      </form>
    </>
  );
}

ファイルのアップロードが完了すると、アプリケーションは入力フィールドをクリアする必要があります。その方法については以下で説明します。

ファイルのアップロード後に入力フィールドをクリアする

これがテキスト フィールドの場合は、状態を空の文字列に設定することで入力をクリアできます。

setSelectedFile("")

ただし、これはファイルタイプの入力フィールドでは機能しません。 selectedField 状態変数を空の文字列に設定すると、状態からファイル データが削除されるだけであり、DOM からは削除されません。これは、この状態では入力値が参照されないためです。

入力値をクリアするには、useRef フックを使用してファイル入力への参照を作成する必要があります。この例では、React から useRef をインポートし、fileRef という名前の ref オブジェクトを作成します。

import { useState, useRef } from "react";
function FileUploadForm() {
  // ...
  const fileRef = useRef()
  return (
    // ...
  );
}

次に、以下に示すように、入力フィールドで ref を参照します。

<form onSubmit={handleSubmit}>
    <label htmlFor="fileInput">Choose a file:</label>
    <input
        type="file"
        id="fileInput"
        onChange={handleFileChange}
        ref={fileRef}
    />
    <button type="submit">Upload</button>
</form>

React は、 ref 変数のcurrent プロパティを DOM 要素に設定します。これは、次のようにファイル値を取得できることを意味します。

fileRef.current.value

その後、この値に null を割り当てることで、この値をリセットできます。

fileRef.current.value = null

これを、次のように handleReset という名前の関数にカプセル化します。

const handleReset = () => {
    fileRef.current.value = null;
};

次に、ファイルが正常にアップロードされたときにこの関数を呼び出して、入力フィールドをクリアします。

ファイルのアップロード後に入力フィールドをリセットする必要がある理由

一般に、ファイルのアップロードが成功した後に入力フィールドをリセットすることをお勧めします。これは、アップロードが成功したことがユーザーに明確に示され、入力フィールドを手動でクリアすることなく別のファイルをアップロードする機会も提供されるためです。

関連記事: