主页 / user-368113

xydope's questions

Martin Hope
xydope
Asked: 2021-12-04 23:23:12 +0000 UTC
  • 0

我正在制作一个简单地扩展普通 html 输入的组件。

const Input: React.FC<HTMLAttributes<HTMLInputElement>> = (...props }) => <input {...props}} />

逻辑很简单，我采用通常的 html 输入，制作一个组件并传递道具。一般来说，所有的 props 都是正常滚动的（placeholder、value、onChange、className 等），但是 props 有问题type。

尝试将类型分配给组件<Input type="text" />时，会发生以下错误：

Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes & HTMLAttributes<HTMLInputElement> & { children?: ReactNode; }'.
  Property 'type' does not exist on type 'IntrinsicAttributes & HTMLAttributes<HTMLInputElement> & { children?: ReactNode; }'.

一般来说，我做错了什么，但我不明白到底是什么。

reactjs
Martin Hope
xydope
Asked: 2020-07-28 20:35:08 +0000 UTC
  • 2

需要焕然一新。

我在react中实现拖放（不是HTML可拖动，通过mouseup / mousemove），我想在拖动活动元素时进行交互式排序（类似于beautiful-dnd，react-dnd），但在确定的那一刻卡住了在 mousemove 事件期间，活动元素 (DragItem) 相对于放置元素和非活动 DragItem 元素的位置。

一般逻辑如下：

  1. 有几个 DragItem（可以移动的项目）
  2. 一旦开始拖动，就会在文档的根部创建一个门户 (DragPortal)。
  3. DragPortal 依次创建 mousemove 和 mouseup 事件以更改活动 DragItem 的位置。

在所有已知选项中，只有 document.elementFromPoint 浮现在脑海中，但这个解决方案似乎很笨拙，因为 您必须偏离反应逻辑，特别是隐藏活动元素以搜索其下的元素（参见下面的示例）。

handleMouseMove({ clientX, clientY, target }) {
    target.style.display = "none"; //именно это мне не нравится.
    console.log(document.elementFromPoint(clientX, clientY));
    target.style.display = "block";
}

我不想偏离react的逻辑，也许你能告诉我一些新鲜的想法？

所有代码都可以在codesandbox中查看

javascript