テキストフィールドにテキストがペーストされた際に処理を行う

こんにちは、 Gaji-Labo フロントエンドエンジニアの石垣です。

今回の記事では、 React で作成したテキストフィールドコンポーネントにテキストがペーストされた際に処理を行う実装を書く機会があったので、その方法をまとめたいと思います。

目的

テキストフィールドにテキストが貼り付けられた際、ペーストされたテキストをスペースで区切った配列に変換してそれぞれのテキストを個別に処理したいということがありました。
この記事ではその実装方法について説明します。

コードの説明

以下が実装したコードです。

import { ReactElement, useState, ClipboardEvent } from "react";

export function Example(): ReactElement | null {
  const [text, setText] = useState("");

  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault();
    const pastedText = e.clipboardData.getData("text/plain");
    if (!pastedText) {
      return;
    }
    // text を正規表現で分割して配列にする
    const textArray = pastedText.split(/ |\u3000/);
    textArray.forEach((item) => {
      // text を更新する処理
    });
  };

  return (
    <input
      type="text"
      value={text}
      onPaste={handlePaste}
      onChange={(e) => setText(e.target.value)}
    />
  );
}

テキストフィールドの value となる text は useState で管理しています。テキストフィールドには onPaste イベントと onChange イベントを設定しています。
onPaste イベントは、テキストフィールドにテキストがペーストされたときに呼び出されます。

ペースト時には、上で定義した handlePaste 関数が呼び出されます。
まず、e.preventDefault() が呼び出されます。これでイベントがキャンセルされるので、 onPaste と onChange が同時に発火することを防いでいます。
次に、クリップボード上のテキストを e.clipboardData.getData("text/plain") で取得しています。

取得したテキストは正規表現で区切られ、 textArray に格納されます。
その後、 forEach で textArray の各要素に対して行いたい処理を記述する形になっています。

まとめ

React で作成したテキストフィールドコンポーネントにテキストがペーストされた際に処理を行う実装についてまとめました。
参考にしていただければ幸いです。