Reactのテキストエリアでwindow.getLocation（）の代わりに使用するもの？

Question

私は単純にtextareaを持っています。ここでは、私が今書いているように、太字、イタリック体などにするためにテキストを選択/ハイライトすることができます。

私は実際にonKeyDownメソッドを使用して作業してからwindow.getSelection()を使用しますが、Reactではwindowを使用するのは間違ったアプローチです。正しい？もしそうなら、私は代わりに何を使うのですか？

handleKeyDown(event) { 
    const highlightedText = window.getSelection().toString() 
    console.log(highlightedText) 
}, 

render() { 
    return (
     <textarea onKeyDown={this.handleKeyDown} /> 
    ) 
} 

Answer 1

Reactにwindow.getSelectionを使用しても問題ありません。コンポーネントモデルを破棄し予期しない結果を得るという点で私がここで見る唯一の問題は、コンポーネント内でメソッドを呼び出す場合ですが、選択は実際にはページ上の別の要素にあります。

onKeyDownハンドラ内でgetSelectionを呼び出しているので、イベントを受け取るためにフォーカスが必要なので、このコンポーネントインスタンスからの選択である必要があります。

しかし、あなたは安全な方法でコンポーネント内の任意の時点で選択を取得できるようにしたい場合、あなたはそれがrefsを使用して焦点を当てていますかどうかをチェックするためにコンポーネント上メンバ関数を作成することができます。

getSelection() { 
    return (this.refs.container === document.activeElement) ? 
     window.getSelection() : null; 
} 

render() { 
    return (
     <textarea onKeyDown={this.handleKeyDown} ref="container" /> 
    ) 
} 

ここでgetSelection()は、このコンポーネントインスタンス内にある場合は選択を返し、そうでない場合はnullを返します。

Answer 2

状況が悪くなる可能性があるのは、React以外のDOMを変更するときです。しかし、そうではありません。

私の反応コードにwindow.getSelectionを呼んでも構いません。私はdocumentメソッド/ attrs とsetTimeoutのようにdocument.activeElementとwindowメソッド/ attrを使用しています。私は何の問題も見つけられず、私は自分が望むものを得るための他のより良い方法を見つけられませんでした。

これはテストにも注意が必要です。ウィンドウオブジェクトを設定し、テストコードで使用できるようにする必要があります。