React：处理 OnMouseDown 和 OnMouseUp 之间状态变化的更快方法？答案

【问题标题】：React: faster way to handle state change between OnMouseDown and OnMouseUp?React：处理 OnMouseDown 和 OnMouseUp 之间状态变化的更快方法？
【发布时间】：2020-05-14 03:45:16
【问题描述】：

我有一个窗口，我只想从顶部栏拖动，类似于...一个 GUI 窗口。

我有一个基于顶部栏上的 OnMouseDown 和 OnMouseUp 事件的状态更新。但是，更新似乎很慢。它仅在我尝试拖放它时才有效。似乎在奇怪的尝试 OnMouseUp 没有正确更新，或者更新缓慢（打印语句与实际值不同）。当用户单击contentTopBar 时，是否有更好的方法来更新此处的状态？

class GenericWindow extends Component {
  constructor(props){
    super(props)
    this.state = {draggable:true}
  }

  render(){    
    return( <motion.div 
                    drag={this.state.draggable}
                    dragMomentum={false}
                    >
                    <div 
            className="contentTopBar homeBar"
            onMouseDown={()=>{this.setState({draggable:true});console.log(`should be TRUE, is: ${this.state.draggable}`)}} // ** mouse down
            onMouseUp={()=>{this.setState({draggable:false});console.log(`should be FALSE, is: ${this.state.draggable}`)}}  // ** mouse up
            > 
            {this.props.title} 
            </div>
                    <div className="ContentWindowContent">
                        {this.props.children}
                    </div>
            </motion.div>
        )
  }
}

编辑：注意我使用的是成帧器运动模块进行拖动，因此是motion.div。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我最终以迂回的方式完成了这项工作，如果有人可以提出更好的建议，我很感兴趣。我添加了一个额外的状态{mouseUp:false}，并将两个 onMouseUp / onMouseDown 行更改为以下内容：

              onMouseEnter={ e=>this.setState({draggable:true, mouseUp:false}) }  
              onMouseLeave={ e=>this.state.mouseUp && this.setState({draggable:false, mouseUp:false}) }

              onMouseDown={e=>this.setState({draggable:true,mouseUp:false})}
              onMouseUp={ e=>{this.setState({mouseUp:true})} }

我正在保存 mouseUp 状态，因为有时我的光标拖动速度比顶部栏区域更快，并且它取消了拖动事件，但我发现这是最强大的

【讨论】：