React での送信後にフォームをクリアする

最近の Web サイトは、ユーザーの注意を引くために互いに競争しなければなりません。 ユーザーは、アプリケーションの使用方法を理解することについてあまり深く考えたくありません。

React アプリは非常に高速であるため、React をフレームワークとして選択することは良い出発点です。

React での送信後にフォームをクリアする

ほとんどの React アプリケーションは何らかの形でフォームを使用します。 React は JavaScript に基づいていますが、React Web アプリケーションのフォームは、他のフレームワークやネイティブ JavaScript とは異なる方法で処理されます。

React でフォームを正常に実装するには、React 固有の詳細をいくつか知っておく必要があります。

この記事では、送信後にフォームの内容をクリアする必要がある場合のユース ケースについて説明します。 たとえば、ユーザーが To Do タスクを送信する必要がある場合、入力して送信したらフォームをクリアして、ユーザーが白紙の状態で入力を開始できるようにする必要があります。

制御コンポーネント

送信されたフォームをクリアする方法について説明する前に、制御されたコンポーネントの概念について説明する必要があります。 これは、状態が入力の値を制御する場合です。

たとえば、<text> 入力の onChange イベント ハンドラーを設定して、ユーザーが新しい文字を入力または削除するたびに状態を更新することができます。

フォームを送信するときに、現在状態で送信されているユーザー入力をクリアする必要があります。 これは、状態全体を削除するという意味ではなく、状態に関連付けられた一時的なテキスト フィールドの値のみを削除します。

送信後の決済フォームの例

これは、送信後にフォームをクリアする簡単な例です。

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [name, setName] = useState("");
  const [names, setNames] = useState([]);
  const handleChange = (e) => {
    setName(e.target.value);
  };
  const handleClick = () => {
    setNames([...names, name]);
    setName("");
  };
  return (
    <div className="App">
      <p>Enter a name</p>
      <input type="text" value={name} onChange={(e) => handleChange(e)}></input>
      <br></br>
      <br></br>
      <button onClick={() => handleClick()}>Add Name</button>
      {names.map((name) => (
        <h1>{name}</h1>
      ))}
    </div>
  );
}

この ライブ デモ でわかるように、ユーザーが自分の名前を入力することになっている単純なテキスト入力があります。 名前を追加というラベルの付いたボタンもあります。

ユーザーがフィールドに名前を入力してボタンをクリックするたびに、その名前がリストに表示され、入力フィールドがクリアされます。

useState() フックを使用して、name と names の 2つの状態変数と、それらを更新するための対応する関数を作成します。

name 状態変数の値は、入力フィールドに関連付けられます。 フィールドに新しい文字を入力すると、name 状態変数の値が更新されます。

names 状態変数は空の配列として初期化されます。 handleClick イベント ハンドラーを設定して、ユーザーがそのボタンをクリックするたびに、テキスト フィールドに入力された現在の値が配列に追加されるようにします。

最も重要なのは、handleClick() 関数で、setName() 関数を使用して name 状態変数の値を空の文字列にリセットすることです。 テキスト入力フィールドの値は状態変数に関連付けられているため、空になります (空の文字列を反映するため)。