Question

我正在尝试在reactjs中重新创建原生textarea行为。具体来说，我希望用户能够选择/突出显示某些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
        });
    });
}

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

1 个答案: