Reactでのフロントエンド選択範囲の実装方法は？

前端の選択機能を実現するために、ReactのuseRefとuseStateを使って選択状態を管理し、window.getSelection()メソッドを使用して選択情報を取得することができます。

最初に、コンポーネント内で選択範囲を保持するためのrefと選択範囲の状態を保持するためのstateを定義します。

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

function App() {
  const [selection, setSelection] = useState(null);
  const textRef = useRef(null);

  // 处理选区变化的函数
  const handleSelectionChange = () => {
    const selectedText = window.getSelection().toString();
    setSelection(selectedText);
  };

  return (
    <div>
      <div ref={textRef} onMouseUp={handleSelectionChange}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
      <p>选中的文本：{selection}</p>
    </div>
  );
}

export default App;

その後、div要素にonMouseUpイベントハンドラを追加し、マウスが離されたときにトリガーされます。関数内で、window.getSelection().toString()を使用して選択されたテキストを取得し、選択状態に設定します。

最後、ページ上で選択したテキストをレンダリングすることによって、フロントエンドの選択機能を実現できます。