React滑块控制按钮

tsx：

import { Component } from "react";
import './index.less';

interface Props {

}
interface State {
  Num: number,
  MaxNum: number,
  // arr:con[]
  // isActive:aa[]
}
// interface con{
//   id:number,
//   content:number
// }
// interface aa{
//   id:number,
//   done:boolean
// }



class Drag extends Component<Props, State>{
  constructor(props: Props) {
    super(props);
    this.state = {
      Num: 0,
      MaxNum: 100,
      // arr:[
      //   {id:1,content:11},
      //   {id:2,content:22},
      //   {id:3,content:66}
      // ],
      // isActive:[
      //   {id:1,done:false},
      //   {id:2,done:false},
      //   {id:3,done:false}
      // ],
    }
  }
  parent?: HTMLDivElement;
  child!: HTMLCollection;
  startX: number = 0;
  ballW: number = 0;
  oW: number = 0;
  x: number = 0;
  dis: number = 0;
  Num: number = 0;
  MaxNum: number = 0;
  scale: number = 0;

  FnStart(ev: React.TouchEvent) {
    this.startX = ev.changedTouches[0].pageX - (ev.target as HTMLDivElement).offsetLeft;
    this.parent = ((ev.target as HTMLDivElement).parentNode) as HTMLDivElement;
    this.child = this.parent.children;
    this.ballW = (ev.target as HTMLDivElement).offsetWidth;
    this.oW = this.parent.offsetWidth - this.ballW;
    document.ontouchmove = this.FnMove.bind(this);
    document.ontouchend = this.FnEnd.bind(this);
  }
  FnMove(ev: TouchEvent) {
    this.x =