Javascript 如何将React.createclass转换为类组件？

我举了一个例子，从这里拖动react js中的某个div

现在它在createClass中，我需要将它转换为

类Dragable extends React.Component

，以便将它导出到另一个组件中。这是代码

APP.JS

import React from 'react';
import './App.css';
import Draggable from './Draggable.js';

function App() {
  return (
    <React.Fragment>
        <Draggable />
    </React.Fragment>
  );
}

export default App;

从“React”导入React；
导入“/App.css”；
从“./Draggable.js”导入Draggable；
函数App（）{
返回(
);
}
导出默认应用程序；

Draggable.js

import React from 'react';

export class Draggable extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            pos: {x: 0, y: 0},
            dragging: false,
            rel: null
        };

        this.onMouseMove = this.onMouseMove.bind(this);
        this.onMouseDown = this.onMouseDown.bind(this);
        this.onMouseUp = this.onMouseUp.bind(this);
    }


    // we could get away with not having this (and just having the listeners on
    // our div), but then the experience would be possibly be janky. If there's
    // anything w/ a higher z-index that gets in the way, then you're toast,
    // etc.
    // componentDidUpdate(props, state) {
    //   if (this.state.dragging && !state.dragging) {
    //     document.addEventListener('mousemove', this.onMouseMove)
    //     document.addEventListener('mouseup', this.onMouseUp)
    //   } else if (!this.state.dragging && state.dragging) {
    //     document.removeEventListener('mousemove', this.onMouseMove)
    //     document.removeEventListener('mouseup', this.onMouseUp)
    //   }
    // }
  
    // calculate relative position to the mouse and set dragging=true
    onMouseDown(e) {
      console.log("1")
      console.log(this.state);
      if (e.button !== 0) return
      this.setState({
        dragging: true,
        rel: {
          x: e.pageX - e.nativeEvent.offsetX,
          y: e.pageY - e.nativeEvent.offsetY
        }
      })
      e.stopPropagation()
      e.preventDefault()
    }

    onMouseUp(e) {
      this.setState({dragging: false})
      e.stopPropagation()
      e.preventDefault()
    }

    onMouseMove(e) {
      if (!this.state.dragging) return
      this.setState({
        pos: {
          x: e.pageX - this.state.rel.x,
          y: e.pageY - this.state.rel.y
        }
      })
      e.stopPropagation()
      e.preventDefault()
    }

    render() {
        return(
            <div 
            style={{position: "absolute", left: "175px", top: "65px", border: "2px solid rgb(170, 170, 85)", padding: "10px"}}
            className="my-draggable" data-reactid=".r[2zxee]" id="messi" 
            onMouseDown={this.onMouseDown}
            onMouseUp={this.onMouseUp}
            onMouseDown={this.onMouseDown}
            initialPos = {{x:0,y:0}}
            >
                Drag Me! See how children are passed through to the div!
            </div>
        )
    }
}


export default Draggable;

从“React”导入React；
导出类Draggable扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
pos:{x:0，y:0}，
拖动：false，
rel:null
};
this.onMouseMove=this.onMouseMove.bind（this）；
this.onMouseDown=this.onMouseDown.bind（this）；
this.onMouseUp=this.onMouseUp.bind（this）；
}
//我们可以不带这个（只带上听众）
//我们的部门），但这样的体验可能会很简陋
//如果z指数越高，任何东西都会妨碍你，那么你就完蛋了，
//等等。
//组件更新（道具、状态）{
//if（this.state.draging&&！state.draging）{
//document.addEventListener（'mousemove'，this.onMouseMove）
//document.addEventListener（'mouseup'，this.onMouseUp）
//}否则如果（！this.state.draging&&state.draging）{
//document.removeEventListener（'mousemove'，this.onMouseMove）
//document.removeEventListener（'mouseup'，this.onMouseUp）
//   }
// }
//计算鼠标的相对位置，并将拖动设置为true
onMouseDown（e）{
控制台日志（“1”）
console.log（this.state）；
如果（e.按钮！==0）返回
这是我的国家({
是的，
rel:{
x:e.pageX-e.nativeEvent.offsetX，
y:e.pageY-e.nativeEvent.offsetY
}
})
e、 停止传播（）
e、 预防默认值（）
}
onMouseUp（e）{
this.setState（{drawing:false}）
e、 停止传播（）
e、 预防默认值（）
}
onMouseMove（e）{
如果（！this.state.draging）返回
这是我的国家({
pos:{
x:e.pageX-这个.state.rel.x，
y:e.pageY-这个。状态。相对y
}
})
e、 停止传播（）
e、 预防默认值（）
}
render（）{
返回(
拖拽我！看看孩子们是如何被传给div的！
)
}
}
导出默认拖拽；

在这段代码中，一切都运行得很好。框显示出来了，但是我不能拖动div，我不知道这是什么问题。我怎样才能解决这个问题

下面是我在JSFIDLE中的示例代码

---

在将其转换为React.Component时，我注意到了一些事情：

渲染时从未使用过

this.state.pos

，因此即使变量中的位置发生了变化，它也不会移动div。

的

样式

属性只是用

{left:“175px”，top:“65px”}

硬编码

在

this.onMouseDown

函数中，您没有正确获取鼠标的位置，这导致它强制每次移动都在拐角处

您从未将

this.onMouseMove

绑定到任何内容。取消注释注释注释掉的大部分代码修复了这一问题

放置在

中的

initialPos

属性完全不起作用。我在构造器中将其转换为道具

以下是更新的JSFIDLE链接：

我将把它嵌入到StackOverflow的一个片段中

类可拖动扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
位置：props.initialPos | |{
x:0,，
y:0
},
拖动：false，
rel:null
}
this.onMouseMove=this.onMouseMove.bind（this）；
this.onMouseDown=this.onMouseDown.bind（this）；
this.onMouseUp=this.onMouseUp.bind（this）；
}
//计算鼠标的相对位置，并将拖动设置为true
onMouseDown（e）{
如果（e.按钮！==0）返回
const de=document.documentElement；
const box=ReactDOM.findDOMNode（this.getBoundingClientRect（）；
const top=box.top+window.pageYOffset-de.clientTop；
const left=box.left+window.pageXOffset-de.clientLeft；
这是我的国家({
是的，
rel:{
x:e.pageX-左，
y:e.pageY-top，
}
})
e、 停止传播（）
e、 预防默认值（）
}
onMouseUp（e）{
这是我的国家({
拖动：false
})
e、 停止传播（）
e、 预防默认值（）
}
onMouseMove（e）{
如果（！this.state.draging）返回
这是我的国家({
pos:{
x:e.pageX-这个.state.rel.x，
y:e.pageY-这个。状态。相对y
}
})
e、 停止传播（）
e、 预防默认值（）
}
组件更新（道具、状态）{
if（this.state.draging&&！state.draging）{
document.addEventListener（'mousemove'，this.onMouseMove）
document.addEventListener（'mouseup'，this.onMouseUp）
}else if（！this.state.draging&&state.draging）{
document.removeEventListener（'mousemove'，this.onMouseMove）
document.removeEventListener（'mouseup'，this.onMouseUp）
}
}
render（）{
报税表（
拖拽我！看看孩子们是如何被传给div的！
)
}
}
ReactDOM.render（，document.querySelector（“#root”）
.my draggable{
光标：指针；
宽度：200px；
高度：200px；
背景色：#cca；
}
将其转换为React.Component时，我注意到了一些事情：

渲染时从未使用过
this.state.pos
，因此即使变量中的位置发生了变化，它也不会移动div。
的
样式
属性只是用
{left:“175px”，top:“65px}硬编码<