可反应反作用力：指数运动

Question

我正在尝试在React中创建一个可拖动组件，以跟踪鼠标指针的路径，但是该组件正在按指数移动。Working demo here

这是我的设置的外观：

块：它充当可拖动组件的支架（下图中的灰色）

块：这是可拖动的组件（下图中的粉红色）我将Block的初始位置设置为left：0，top：0，然后根据鼠标拖动更改位置。这是更新位置的逻辑：

单击我正在触发onMouseDown事件的粉红色块时：

// function to handle mouse down
  mouseDown = (e) =>{
    this.setState({originalX:e.clientX, originalY:e.clientY});
    window.addEventListener("mousemove",this.moving);
    window.addEventListener('mouseup', this.mouseUp);
  }

设置originalX，originalY以跟踪点击事件触发的原始​​位置。这用于计算位置变化量，并相应地更新left和top属性

这是我的鼠标移动外观：

 // function to handle mouse move
  moving = ({clientX, clientY})=>{

    this.setState((prevState)=>{
       return {
         style:{
           left:(this.state.left+(clientX - this.state.originalX))+"px" ,
           top: (this.state.top+(clientY - this.state.originalY))+"px"
          },
          left:this.state.left+(clientX - this.state.originalX),
          top: this.state.top+(clientY - this.state.originalY)
          };
      });
  }

这里我将this.state.style.left设置为（this.state.left +（clientX-this.state.originalX））+“ px”此处this.state.left 表示要传递给组件的初始位置（在本例中为0）。 Baiscally，我将位置[[（clientX-this.state.originalX）的变化添加到初始位置。此外，我将此计算结果存储在this.state.left中，以供将来更新。属性top也是如此。

理想情况下，当我拖动鼠标时，它应该跟踪鼠标指针，但移动似乎是指数级的。我尽力调试，但无法找出问题。感谢有人在这里提供帮助。

Answer 1

我做了一些挖掘，发现了问题。我应该将左右属性的状态更新移至mouseUp函数。这是我修改两个函数的方法：

  moving = ({clientX, clientY, target})=>{

    this.setState((prevState)=>{
       return {
         style:{
           left:(this.state.left+(clientX - this.state.originalX))+"px" ,
           top: (this.state.top+(clientY - this.state.originalY))+"px"
          }
          };
      });
  }

  mouseUp = ({clientX,clientY}) => {
    window.removeEventListener("mousemove",this.moving);
    window.removeEventListener("mouseup",this.mouseUp);

    this.setState({
      left:(this.state.left+(clientX - this.state.originalX)),
      top:(this.state.top+(clientY - this.state.originalY))
    })

  }