TypeScript + React 点击小块拖拽+本地存储记录位置

TypeScrip 代码块:

import React, { Component, createRef } from 'react'
import './TZ3.less'
interface Props { }
interface State { }
interface olal {
    top: number,
    left: number
}
export default class index extends Component<Props, State> {
    disx: number = 0;
    disy: number = 0;
    x: number = 0;
    y: number = 0;
    off?: olal;
    oDiv = createRef<HTMLDivElement>()
    constructor(props: Props) {
        super(props)
        this.state = {}
    }

    FnBox() {
        return this.oDiv.current as HTMLDivElement;
    }
    componentDidMount() {
        this.FnBox().onmousedown = this.FnDown.bind(this);

        if (localStorage.off) {
            this.off = JSON.parse(localStorage.off);
            if (this.off) {
                this.FnBox().style.left = this.off.left + 'px';
                this.FnBox().style.top = this.off.top + 'px';
            }
        }
    }
    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.bind(this);
        return false;
    }
    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.off = JSON.stringify({ left: this.x, top: this.y });
    }
    FnUp() {
        document.onmouseup = null;
        document.onmousemove = null;
    }
    render() {
        return (
            <div className='about' ref={this.oDiv}></div>
        )
    }
}

css代码块:

.about{
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: red;
}