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

【问题标题】：ReactJS onPaste event: how to determine if user has selected some of textarea's existing contentReactJS onPaste 事件：如何确定用户是否选择了一些 textarea 的现有内容
【发布时间】：2016-08-11 16:05:15
【问题描述】：

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

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

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

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

有没有办法判断一些textarea内容是否被选中/高亮？

谢谢。

【问题讨论】：

标签： javascript reactjs onpaste

【解决方案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
        });
    });
}

【讨论】：