React+Typescript滑块滑动对应盒子高亮

Drag.tsx部分：

import React, { Component, createRef } from "react";
import './drag.less';

interface Props {

}
interface State {
  Num: number,
  MaxNum: number,
  SonArray: SonArrays[]
}
interface SonArrays {
  id: string,
  text: number
}
class Drag extends Component<Props, State>{
  constructor(props: Props) {
    super(props);
    this.state = {
      Num: 0,
      MaxNum: 100,
      SonArray: [
        {
          id: "1",
          text: 10
        },
        {
          id: "2",
          text: 20
        },
        {
          id: "3",
          text: 30
        },
        {
          id: "4",
          text: 40
        },
        {
          id: "5",
          text: 50
        },
        {
          id: "6",
          text: 60
        },
        {
          id: "7",
          text: 70
        },
        {
          id: "8",
          text: 80
        },
        {
          id: "9",
          text: 90
        },
        {
          id: "10",
          text: 100
        },
      ]
    }
  }
  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.o