react+ts拖拽刷新，记录位置

tex部分：

import { Component, createRef } from "react";
import "./index.less"
interface iProps{}
interface iState{}
interface idata{
    top:number;
    left:number;
}
export default class About extends Component<iProps, iState>{
    elementBox = createRef<HTMLDivElement>();
    disX:number = 0;
    disY:number = 0;
    X:number = 0;
    Y:number = 0;
    sData?:idata
    constructor(props:iProps){
        super(props);
        this.state ={}
    }
    FnBox(){
        return this.elementBox.current as HTMLDivElement
    }
    FnMove(ev:MouseEvent){
        this.X=ev.clientX-this.disX
        this.Y=ev.clientY-this.disY

        this.FnBox().style.left = this.X+"px"
        this.FnBox().style.top = this.Y+"px"
        localStorage.sData = JSON.stringify({left:this.X,top:this.Y})
        // console.log(localStorage.sData,1111);
        
    }
    FnUp(){
        document.onmousemove = null;
        document.onmouseup = null;
    }
    FnDown(ev:MouseEvent){
       this.disX = ev.clientX-this.FnBox().offsetLeft;
       this.disY = ev.clientY-this.FnBox().offsetTop;
       document.onmousemove = this.FnMove.bind(this)
       document.onmouseup=this.FnUp
       return false;
    // ev.preventDefault();
    }
    componentDidMount(){
        this.FnBox().onmousedown=this.FnDown.bind(this)
        if(localStorage.sData){
            this.sData = JSON.parse(localStorage.sData)
            console.log(this.sData,122211);
                if(this.sData){
                    this.FnBox().style.left = this.sData.left+'px'
                    this.FnBox().style.top = this.sData.top+"px"
                
            }
        }
    }
    render(){
        return(
          <div className="about">
              <div className="about-box" ref={this.elementBox}></div>
          </div>
        )
    }
}

less部分：

.about{
    .about-box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
    }
}