ReactJS onPaste事件:如何判断用户是否选择了textarea'现有的内容

ReactJS onPaste event: how to determine if user has selected some of textarea's existing content

本文关键字：textarea 选择 是否 事件 onPaste 何判断 用户 判断 ReactJS      更新时间：2023-09-26

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

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

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

将把剪贴板内容附加到现有的textarea内容上，但是如果用户选择了某些textarea，那么该选择不会被覆盖。

是否有一种方法来确定是否一些文本区内容被选中/突出显示?

谢谢。

我明白了:)

你可以使用本地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
        });
    });
}
相关文章：