React.jsでonChangeイベントを使ってcontenteditable要素の変更を検知する方法

2024-04-11

React.jsでcontenteditable要素のonChangeイベントを扱う

概要

contenteditable属性を持つ要素は、ユーザーが直接編集できるテキストエリアのような機能を提供します。React.jsでこの要素の変更を検知するには、onChangeイベントを使用します。

コード例

以下のコードは、contenteditable属性を持つ要素の変更を検知し、その内容をコンポーネントの状態に反映する例です。

import React, { useState } from 'react';

const App = () => {
  const [content, setContent] = useState('');

  const handleChange = (event) => {
    setContent(event.target.value);
  };

  return (
    <div>
      <p>編集可能なテキストエリア：</p>
      <div
        contentEditable
        value={content}
        onChange={handleChange}
      />
      <p>現在の内容：</p>
      <p>{content}</p>
    </div>
  );
};

export default App;

このコードでは、以下の処理が行われます。

useState Hookを使用して、contentという状態変数を初期値""で初期化します。
onChangeイベントハンドラー関数を定義します。この関数は、イベントオブジェクトを受け取り、その中のtarget.valueプロパティを使用して、content状態変数を更新します。
contenteditable属性を持つ要素をレンダリングします。この要素には、valueプロパティにcontent状態変数、onChangeプロパティにhandleChangeイベントハンドラー関数を設定します。
content状態変数の現在の値を表示するテキスト要素をレンダリングします。

ポイント

contenteditable属性を持つ要素は、valueプロパティで現在の内容を指定できます。
状態変数を更新することで、コンポーネント内の他の要素に反映できます。

この解説では、React.jsでcontenteditable属性を持つ要素の変更を検知し、その内容を反映する方法について説明しました。この方法を参考に、さまざまな編集機能を持つコンポーネントを作成してみてください。

サンプルコード: React.jsでcontenteditable要素のonChangeイベントを扱う

import React, { useState } from 'react';

const App = () => {
  const [content, setContent] = useState('');

  const handleChange = (event) => {
    setContent(event.target.innerHTML);
  };

  return (
    <div>
      <p>編集可能なテキストエリア：</p>
      <div
        contentEditable
        dangerouslySetInnerHTML={{ __html: content }}
        onInput={handleChange}
      />
      <p>現在の内容：</p>
      <p>{content}</p>
    </div>
  );
};

export default App;

ポイント

onInputイベントは、onChangeイベントよりも頻繁に発生するため、より滑らかな編集体験を提供できます。

React.jsでcontenteditable要素のonChangeイベントを扱うその他の方法

useRef Hookを使用して、contenteditable要素の現在の内容を保存できます。

import React, { useRef, useState } from 'react';

const App = () => {
  const contentRef = useRef('');
  const [content, setContent] = useState('');

  const handleChange = () => {
    setContent(contentRef.current.textContent);
  };

  return (
    <div>
      <p>編集可能なテキストエリア：</p>
      <div
        contentEditable
        ref={contentRef}
        onInput={handleChange}
      />
      <p>現在の内容：</p>
      <p>{content}</p>
    </div>
  );
};

export default App;

contenteditable属性を持つ要素をレンダリングします。この要素には、refプロパティでcontentRef変数を設定します。

onBlurイベントは、contenteditable要素からフォーカスが外れたときに発生します。このイベントを使用して、要素の内容を取得できます。

import React, { useState } from 'react';

const App = () => {
  const [content, setContent] = useState('');

  const handleChange = (event) => {
    setContent(event.target.value);
  };

  return (
    <div>
      <p>編集可能なテキストエリア：</p>
      <div
        contentEditable
        value={content}
        onBlur={handleChange}
      />
      <p>現在の内容：</p>
      <p>{content}</p>
    </div>
  );
};

export default App;