当前位置: 首页 > 知识库问答 >
问题:

React Draggable属性仅应用于数组中的最终元素

聂溪叠
2023-03-14

我希望通过react中的JSX将可拖动列表项添加到我的DOM中。

DOM的预期输出应如下所示:

<li draggable="true" style="border: 1px solid red;">Test Scenario 1</li>
<li draggable="true" style="border: 1px solid red;">Test Scenario 2</li>
<li draggable="true" style="border: 1px solid red;">Test Scenario 3</li>

但实际产出是:

<li style="border: 1px solid red;">Test Scenario 1</li>
<li style="border: 1px solid red;">Test Scenario 2</li>
<li draggable="true" style="border: 1px solid red;">Test Scenario 3</li>

我尝试过的当前代码:

import React from 'react';
import { useDrag } from "react-dnd";

function LibraryItems(props) {

    const [{ isDragging }, dragRef] = useDrag(() => ({
        type: "li",
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    }));

    
    // Declare and populate array of Library Scenarios
    const itemList = []
        
    props.items.map(item => {
        itemList.push(<li style={{border: 'red 1px solid'}} ref={dragRef}>{item.title}</li>);
    })

        
    return (
        <ul>
            {itemList}
        </ul>
    )
}

export default LibraryItems

共有1个答案

苍阳成
2023-03-14

对于每个li,基本上都需要一个dragRef,我会这样做:

  const itemList = [];
  const drags = {};
  
  props.items.forEach((item) => {
    const drag = useDrag(() => ({
      type: "li",
      collect: (monitor) => ({
        isDragging: monitor.isDragging()
      })
    }));

    const [{ isDragging }, dragRef] = drag;

    drags[item.title] = drag;

    itemList.push(
      <li style={{ border: "red 1px solid" }} ref={dragRef} key={item.title}>
        {item.title}
      </li>
    );
  });

如果你想检查一个特定的li是否被拖动,你可以通过它的标题访问它(它们应该是唯一的),例如对于标题为"li1"的li:

console.log(drags["li1"][0].isDragging);

工作代码沙箱。

 类似资料:
  • 我如何使用“insref”和“pref”对下面的元素进行分组,我在xslt版本1中使用了生成密钥id。 期望的结果: 这是我所拥有的。我也在使用密钥生成函数。任何想法这个xslt有什么问题。至于计数,我正在考虑获得唯一的密钥计数。

  • 问题内容: 从属性文件中为最终属性进行Spring注入的一个简单问题。 我有一个属性文件,要在其中存储文件路径。通常,当我使用属性文件时,我会使用类似以下的方法来设置类属性: 然后在我spring.xml我会像这样: 这很好用,很简单,并且使代码简洁美观。但是我不确定在尝试将属性值注入最终类属性时使用的最整洁的模式是什么? 显然是这样的: 不管用。还有另一种方法吗? 问题答案: 将值注入最终字段的

  • 问题内容: 关于从属性文件中为最终属性进行Spring注入的一个简单问题。 我有一个属性文件,要在其中存储文件路径。通常,当我使用属性文件时,我会使用类似以下的方法来设置类属性: 然后在我spring.xml我会像这样: 这样效果很好,很简单,并且使代码更简洁。但是我不确定在尝试将属性值注入最终类属性时使用的最整洁的模式是什么? 显然是这样的: 不管用。还有另一种方法吗? 问题答案: 如果您正在寻

  • 如何使用属性文件在应用程序中存储全局变量,同时使用公共静态最终变量将它们注入应用程序? 看过这个问题后,我希望找到一种方法,可以从属性文件将静态final变量注入到应用程序中。我很失望,但最终找到了一个鱼与熊掌兼得的方法。 我在下面张贴这个解决方案,以添加到简编所以...

  • 我想在“价格”数组中找到最高的元素,然后在“字母”数组中打印相应的元素 我需要一些关于我能做什么的建议。我尝试过输出字母[索引],但由于我认为的范围,我遇到了一个错误。我对编码很陌生,所以这真的困扰着我。

  • 本摘录自《破解编码访谈》第5版 数字随机生成并存储在一个(扩展的)数组中。你如何跟踪中位数 作者向我们介绍了一个基于堆的解决方案: 堆非常擅长基本排序和跟踪max和mins。这实际上很有趣——如果你能跟踪元素的大一半和小一半。大一半保存在最小堆中,这样大一半中的最小元素在根。小一半保存在最大堆中,这样最小一半中的最大元素在根。现在有了这些数据结构,你就有了潜在的中值元素在根。”如果堆不再相同大小,