選択テキスト＆ハイライト選択または選択値を取得する（リアクト）

Question

I持っているいくつかのスパンが表示さリアクトアプリケーション：私はそう

のようにマウスでテキストを選択するようにユーザーをしたいと思い

<span>Hello</span> <span>my</span> <span>name</span> <span> is </span> ... 

を

。そして、選択した値を取得するか、テキストなどを強調表示してください。 Reactではどうしたらいいですか？どのイベントハンドラを使用するのか、そして現在の選択をどのように保持するのかはわかりません！最小限の例やヒントをいただければ幸いです！

Answer 1

...それはあなたのために参考になることを願っています。 window.getSelection APIを使用してください。出力するには

---

は、テキストランwindow.getSelection.toString()

Answer 2

これは、テキスト領域で選択された値の表示です。これを試すことができます。私のテキストはテキストエリアにあります。スパンで試すことができます。私はそれが非常にうまくいっていると試していた。私はこのためのリアクト固有のソリューションはありません

function getSelectionTxt() { 
 
    var text = ""; 
 
    var activeEl = document.activeElement; 
 
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null; 
 
    if (
 
     (activeElTagName == "textarea") || (activeElTagName == "input" && 
 
     /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) && 
 
     (typeof activeEl.selectionStart == "number") 
 
    ) { 
 
     text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd); 
 
    } else if (window.getSelection) { 
 
     text = window.getSelection().toString(); 
 
    } 
 
    return text; 
 
} 
 

 
document.onmouseup = document.onkeyup = document.onselectionchange = function() { 
 
    document.getElementById("sel").value = getSelectionTxt(); 
 
};

Selection: 
 
<br> 
 
<textarea id="sel" rows="3" cols="50"></textarea> 
 
<p>Please select some text.</p> 
 
<input value="Some text in a text input"> 
 
<br> 
 
<input type="search" value="Some text in a search input"> 
 
<br> 
 
<input type="tel" value="4872349749823"> 
 
<br> 
 
<textarea>Some text in a textarea</textarea><br/> 
 
<span>Hii,</span><span>Urvish</span><span>How's</span><span>You?</span>