Javascript 如何实现可拖动的React组件

我又回到了React，我希望有一些组件可以被我制作的网站上的用户拖动。注意，我所说的拖拽是指“用鼠标在页面上移动”，而不是那种拖拽

import React from 'react';

export default class Folder extends React.Component {

  constructor(props) {
    super(props);
    this.state = {mouseDown: false,
                    name: props.name, 
                    left: props.left,
                    top:props.top   
                 };
  } 

  // mouse down -> grab coords and offset
  // mouse move, if mouse down true, make mouse coords 
  // folder coords
  // on mouse up change mouse down to false.(can't move)

  mouseHandler(e){
    this.setState({mouseDown: true})
  }
  mouseMove(e){
    if(!this.state.mouseDown){
        return
    }else{
        console.log('mouse held and moving')
        let newLeft = e.clientX - e.nativeEvent.offsetX
        let newTop = e.clientY - e.nativeEvent.offsetY
        this.setState({left: newLeft, top:newTop})
    }
  }
  mouseUp(e){
    this.setState({mouseDown: false})
    console.log('mouse up')
  }



  render() {
    return  (<div className="icon" 
             onMouseDown={(e) => this.mouseHandler(e)}
             onMouseMove={(e) => this.mouseMove(e)}
             onMouseUp={(e) => this.mouseUp(e)}
             style={{top: this.state.top, left: this.state.left}} >
                <div className="tab"></div>
                <div className="foldergap"></div>
                <div className="foldertitle"><p>{this.state.name}</p>/div>
            </div>)
  }
};

到目前为止，我的代码还可以工作，但有点不稳定，当鼠标启动/释放时，并不总是注册

这是我试图使其可拖动的组件

import React from 'react';

export default class Folder extends React.Component {

  constructor(props) {
    super(props);
    this.state = {mouseDown: false,
                    name: props.name, 
                    left: props.left,
                    top:props.top   
                 };
  } 

  // mouse down -> grab coords and offset
  // mouse move, if mouse down true, make mouse coords 
  // folder coords
  // on mouse up change mouse down to false.(can't move)

  mouseHandler(e){
    this.setState({mouseDown: true})
  }
  mouseMove(e){
    if(!this.state.mouseDown){
        return
    }else{
        console.log('mouse held and moving')
        let newLeft = e.clientX - e.nativeEvent.offsetX
        let newTop = e.clientY - e.nativeEvent.offsetY
        this.setState({left: newLeft, top:newTop})
    }
  }
  mouseUp(e){
    this.setState({mouseDown: false})
    console.log('mouse up')
  }



  render() {
    return  (<div className="icon" 
             onMouseDown={(e) => this.mouseHandler(e)}
             onMouseMove={(e) => this.mouseMove(e)}
             onMouseUp={(e) => this.mouseUp(e)}
             style={{top: this.state.top, left: this.state.left}} >
                <div className="tab"></div>
                <div className="foldergap"></div>
                <div className="foldertitle"><p>{this.state.name}</p>/div>
            </div>)
  }
};

从“React”导入React；
导出默认类文件夹扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={mouseDown:false，
名称：props.name，
左：道具，左，
顶：道具
};
} 
//鼠标按下->抓取坐标和偏移
//鼠标移动，如果鼠标按下为真，则使鼠标协调
//文件夹坐标
//向上移动鼠标时，将向下移动鼠标更改为false。（无法移动）
鼠手（e）{
this.setState（{mouseDown:true}）
}
鼠标移动（e）{
如果（！this.state.mouseDown）{
返回
}否则{
console.log（'鼠标保持并移动'）
设newLeft=e.clientX-e.nativeEvent.offsetX
设newTop=e.clientY-e.nativeEvent.offsetY
this.setState（{left:newLeft，top:newTop}）
}
}
鼠标（e）{
this.setState（{mouseDown:false}）
console.log（'鼠标向上'）
}
render（）{
return（this.mouseHandler（e）}
onMouseMove={（e）=>this.mouseMove（e）}
onMouseUp={（e）=>this.mouseUp（e）}
style={{top:this.state.top，left:this.state.left}>
{this.state.name}
/div>
)
}
};

我知道有些图书馆我可以使用，但我想在我能使用的地方使用我自己的作品。我也看到过类似的情况，但答案要么是使用过时的技术，要么是DOM操作（看起来不像“反应方式”），要么是库

我的问题是我做错了什么？实现此功能的推荐方法是什么

---

谢谢。

我不懂“拖来拖去，但不要拖去拖去”，所以如果你不把它放在某个地方，拖来拖去是为了什么？当然。我希望react有这样的功能：而不是这样：它们在外观和效果上明显不同，但我看到它们都被称为“可拖动”，我只是希望它是显而易见的：）