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


こんにちは、 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 で作成したテキストフィールドコンポーネントにテキストがペーストされた際に処理を行う実装についてまとめました。
参考にしていただければ幸いです。

Gaji-Labo は Next.js 開発の実績と知見があります

フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。

「既存のサイトを Next.js に移行したい」
「人手が足りず信頼できるエンジニアを探している」
「自分たちで手を付けてみたがいまいち上手くいかない」

フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!

投稿者 Ishigaki Shotaro

未経験から Gaji-Labo に入社。現在は React/TypeScript/Next.js の案件で MUI を使ったコンポーネント組み込みを担当。プロジェクトチームのリードとして共に組み込み作業をしているメンバーの進行管理も行っています。休日はだいたい家で音楽を聴いており、たまにライブに出かけています。