javascript - ReactJS onPaste 事件：如何确定用户是否选择了一些 textarea 的现有内容

Question

我正在尝试在 reactjs 中重新创建本机 textarea 行为。具体来说，我希望用户能够选择/突出显示文本区域的一些现有文本，然后将新文本粘贴到所选内容上。

我当前的反应 onPaste 事件处理程序：

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

这会将剪贴板内容附加到现有的 textarea 内容中，但如果用户选择了一些 textarea，则该选择不会像应有的那样被覆盖。

有没有办法确定是否选择/突出显示了某些 textarea 内容？

谢谢。

Answer 1

我想到了 ：）

您可以使用原生 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
        });
    });
}