时间戳

首页 > 解决方案 > React：处理 OnMouseDown 和 OnMouseUp 之间状态变化的更快方法？

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

问题描述

我有一个窗口，我只想从顶部栏中拖动，类似于...一个 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。

标签： javascriptreactjs

解决方案

我最终以一种迂回的方式完成了这项工作，如果有人能提出更好的建议，我很感兴趣。我添加了一个额外的 state {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 状态，因为有时我的光标拖动速度比顶部栏区域快并且它取消了拖动事件，但我发现这是最强大的

推荐阅读