0

reactjs でネイティブのテキストエリアの動作を再作成しようとしています。具体的には、ユーザーがテキストエリアの既存のテキストの一部を選択/強調表示してから、選択範囲に新しいテキストを貼り付けられるようにしたいと考えています。

私の現在の反応onPasteイベントハンドラー：

onPaste(e) {
    let existingText = e.target.value;
    e.clipboardData.items[0].getAsString((str) => {
        this.setState({
            fieldValue: existingText + str
        });
    });
}

これにより、クリップボードのコンテンツが既存のテキストエリアのコンテンツに追加されますが、ユーザーがテキストエリアの一部を選択した場合、その選択は上書きされません。

テキストエリアのコンテンツの一部が選択/強調表示されているかどうかを判断する方法はありますか?

ありがとう。

4

1 に答える 1

0

私はそれを考え出した ：）

ネイティブ JS の selectionStart と selectionEnd を使用できます...

onPaste(e) {
    let existingText = e.target.value,
        selectStart = e.target.selectionStart,
        selectEnd = e.target.selectionEnd;

    e.clipboardData.items[0].getAsString((str) => {
        let newText = newText = existingText.substring(0, selectStart) + str + existingText.substring(selectEnd, existingText.length);

        this.setState({
             fieldValue: newText
        });
    });
}
于 2016-08-11T20:16:09.403 に答える