react-rnd

Posted 2023-04-26

参考技术A react-rnd 是一个React 组件库，可以提供一个可调整大小与可拖拽的组件。

开始调整大小时调用

组件调整大小时调用

组件停止调整大小时调用

组件开始拖拽时调用

组件拖拽时调用

组件停止拖拽时调用

在 react-rnd 中选择文本时，如果选择超出可拖动组件，则选择会更改

【中文标题】在 react-rnd 中选择文本时，如果选择超出可拖动组件，则选择会更改

【英文标题】：While selecting text inside a react-rnd, and if selection goes out of the draggable component, the selection changes

【发布时间】：2021-11-14 21:28:07

【问题描述】：

我使用 react-rnd 实现了一个可拖动的 textarea，方法是将 textarea 组件放在 react-rnd 组件中。现在，当我尝试使用光标选择 textarea 内的文本时，如果我不小心退出了 react-rnd 组件，则选择会发生变化。

问题如下图所示。在这里，我尝试从“o”中选择文本并朝相反的方向前进，当我离开文本框时，选择会发生变化，并且选择了“o”字母之后的所有内容。即使我退出 react-rnd 组件，如何在这种情况下保留原始选择“你好”。

如果我将文本区域从可拖动组件中取出，则不会出现此问题。我被这个问题困扰了超过 2 天，但我还没有找到解决方案。

我在下面的代码框中创建了我的问题的副本。

https://codesandbox.io/s/lucid-sky-bl33e?file=/src/App.js

【参考方案1】：

由于用户选择有问题，您可以为该文本区域添加副本或选择文本按钮。

请参阅以下网站以实现该按钮：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard

【讨论】：

问题是我想通过拖动选择文本，并且当我移出输入框时选择不能改变。