React の Alert メソッド

顧客は、インタラクティブな機能を備えた Web アプリケーションを使用したいと考えています。 高いユーザー エクスペリエンス基準を維持することで、ユーザーはより長く滞在し、Web サイトに戻ってくることが保証されます。

顧客とのコミュニケーションは、優れた UX を維持するために不可欠な要素の 1つです。 たとえば、赤いテキストを使用して、ユーザーに問題があることを伝えることができます。

Web 開発者は、他の多くの方法を使用してユーザーと通信できます。 この記事では、alert() メソッドと、それを使用してユーザーと通信する方法について説明します。

React で window.alert() を使用する

alert() メソッドは、ユーザーにメッセージを表示するためによく使用されます。 このメソッドは、ボタンをクリックして使用できるダイアログ ボックスを表示します。

ポップアップ メッセージはページの中央に表示され、ユーザーがアプリを操作する能力を制限します。

アラート内のメッセージを強調表示するため、重要なことを伝えるためにこのメソッドを使用する必要があります。 ただし、ユーザーはメッセージを閉じてもアプリケーションを引き続き使用できます。

理想的なシナリオでは、何か問題がある場合にのみ window.alert() がトリガーされ、ポップアップ メッセージが表示されます。 重大なエラーがない場合は、他のあまり強制的でない方法を使用してユーザーと通信できます。

このメソッドは、警告ボックス内のテキストを表す文字列である 1つの引数を取ります。 何も返しません。

alert() がどのように機能するかをよりよく理解するために、この例を見てみましょう。

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [error, setError] = useState(true);
  const validateField = (e) => {
    setError(e.target.value.indexOf("@") === -1 ? true : false);
  };
  const handleEmailSubmit = (e) => {
    if (error) {
      alert("please enter correct e-mail");
    } else {
      return null;
    }
  };
  return (
    <div className="App">
      <input type="text" onChange={(e) => validateField(e)}></input>
      <button onClick={() => handleEmailSubmit()}>Submit E-mail</button>
    </div>
  );
}

codesandbox のライブ デモ を見ると、入力フィールドとそれを送信するためのボタンを備えた単純なアプリケーションがあることがわかります。

ここでは、useState() フックをインポートして状態変数 error を作成し、その値を更新する関数をインポートします。 後で、この状態変数をチェックして、ユーザーに警告し、電子メールを正しく入力するように指示するかどうかを決定します。

空のフィールドを送信するとエラーが発生するため、状態変数をデフォルトで true に設定します。

validateField() 関数では、テキスト入力の値が実際のメールかどうかを確認し、それに応じて error 状態変数を更新します。

具体的には、テキスト入力にメールに不可欠な @ 記号が含まれているかどうかを確認します。 テキスト フィールドに @ 記号がない場合は、三項演算子を使用して状態変数を true に更新します。

そうでない場合は、error 変数を false に設定します。

ユーザーがアプリのボタンをクリックすると実行される handleEmailSubmit() 関数もあります。 error 状態変数の値をチェックし、エラーがあれば alert() 関数を呼び出します。

JSX には、<input> と <button> という 2つの要素を持つ <div> コンテナがあります。 テキスト入力には onChange イベント ハンドラがあり、値が変更されるたびに入力に @ 記号が含まれているかどうかをチェックし、それに応じて error 変数の値を更新します。

ボタンの onClick イベント ハンドラーは handleEmailSubmit 関数を呼び出します。この関数は、エラーが発生した場合にアラートを表示します。