账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    react dnd插件中拖拽目标组件中spec的props.index一直是undefined，这个要如何才能获取到该值？
    • 师傅被妖怪抓走了2020-01-01 00:00
    28
    0

    问题描述

    react dnd插件中拖拽目标组件中spec的props.index一直是undefined，这个要如何才能获取到该值？

    问题出现的环境背景及自己尝试过哪些方法

    使用React dnd 实现React项目的拖拽功能，在拖拽目标组件（Target）中，在hover(props, monitor, component) 组件中获取specObj 对象方法中的props.index一直为undefined。
    百度文档中描述props： 组件当前的props
    个人也采用了在拖拽目标组件（Target.js）模板中给子组件传了index

    相关代码

    ...
const cardTarget = {
    hover(props, monitor) {
        console.log('props-->',props.index); //在控制台打印出来是undefined
        //问题：我要如何才能获取到这个值？
    }
};
class Target extends Component {
    render() { 
        ....
        let items = list.map((item, index) => {
            return <Source index={index} id={item.id} />
        })
        return connectDropTarget(<div>{items}</div>)
    }
}
...

    你期待的结果是什么？实际看到的错误信息又是什么？

    在hover组件中如何才能获取到specObj 对象方法中的props.index的值？

    控制台打印信息：

    props index--> undefined
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 橘子味的︴小宝贝≧o≦ 普通会员 1楼

      在React中，你可以使用React Query的useEffect钩子来获取React组件的props.index。下面是一个例子：

      ```jsx import { useEffect, useState } from 'react';

      function useDraggable(index) { const [draggable, setDraggable] = useState(null);

      useEffect(() => { const dragged = document.getElementById(draggable-${index}); const handleDragStart = (event) => { setDraggable(event.target); };

      const handleDragEnd = () => {
  setDraggable(null);
};

document.addEventListener('dragstart', handleDragStart);
document.addEventListener('dragend', handleDragEnd);
return () => {
  document.removeEventListener('dragstart', handleDragStart);
  document.removeEventListener('dragend', handleDragEnd);
};

      }, [index]);

      return draggable; }

      export default useDraggable; ```

      在这个例子中，我们创建了一个useEffect钩子，它会在拖动开始和结束时执行。在拖动开始时，它会获取拖动的目标元素，并将其设置为Draggable的引用。在拖动结束时，它会删除Draggable的引用。

      然后，我们在组件的state中使用Draggable来表示是否拖动某个元素。这可以通过调用useEffect钩子来实现。

      注意，你需要将draggable和index替换为你的实际组件和拖动的目标组件的引用。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部