React js自定义视频组件如何计算搜索栏？

Question

我正在React React js中创建一个自定义视频组件，我拥有一个基本的功能，现在只缺少一个功能。能够添加滚动搜索栏的前后。

安装组件后，我添加了一堆事件侦听器，并将状态从视频引用复制到react js状态。

我有一个问题，我不知道如何计算搜索栏的当前时间

我的组件

import React from "react";

class Video extends React.Component {

    video = React.createRef();

    state = {
        currentTime: 0,
        duration: 0,
        ended: false,
        pasued: false,
        playing: false,
        muted: false,
        expand: false,
    } 

    componentDidMount() {
      this.video.current.addEventListener("loadedmetadata", this.handleLoadMetaData);
        this.video.current.addEventListener("ended", this.handleVideoEnded);
        this.video.current.addEventListener("play", this.handleVideoPlay);
        this.video.current.addEventListener("pause", this.handleVideoPause);
        this.video.current.addEventListener("click", this.handleMute);
        this.video.current.addEventListener("timeupdate", this.handleTimeUpdate);
        this.video.current.addEventListener("mousedown", this.handleMouseDown);
        this.video.current.addEventListener("mouseup", this.handleMouseUp);
    }

    componentWillUnmount() {
        this.video.current.removeEventListener("loadedmetadata", this.handleLoadMetaData);
        this.video.current.removeEventListener("ended", this.handleVideoEnded);
        this.video.current.removeEventListener("play", this.handleVideoPlay);
        this.video.current.removeEventListener("pause", this.handleVideoPause);
        this.video.current.removeEventListener("click", this.handleMute);
        this.video.current.removeEventListener("timeupdate", this.handleTimeUpdate);
        this.video.current.removeEventListener("mousedown", this.handleMouseDown);
        this.video.current.removeEventListener("mouseup", this.handleMouseUp);
      }

      handleLoadMetaData = () => {
        const currentTime = this.video.current.currentTime
        const duration = this.video.current.duration

        this.setState({
          currentTime,
          duration,
        })
      }

      handleTimeUpdate = () => {
        const currentTime = this.video.current.currentTime  
        const duration = this.video.current.duration

        this.setState({
          currentTime,
          duration,
        })
      }

    handleChange = () => {
        console.log('test');

        const value = this.video.current.currentTime / this.video.current.duration 
        const time = this.video.current.duration * (value / 100)

        this.setState({
          currentTime: time,
        })
      }

      handleMute = () => {
        this.setState({
            muted: !this.state.muted,
          });
      }

      handleVideoPlay = () => {
        this.setState({
          playing: true,
          pasued: false,
          ended: false,
        });
      }

      handleVideoEnded = () => {
        this.setState({
          playing: false,
          ended: true,
        });
      }

      handleVideoPause = () => {
        this.setState({
            pasued: true,
            playing: false,
        });
      }

      handleMouseDown = () => {
        this.setState({
          playing: false,
          pasued: true,
        })
      }

      handleMouseUp = () => {
        this.setState({
          playing: true,
          pasued: false,
        })
      }

    render() {
        const thumbnail = this.state.playing ? "" : "thumbnail"
        let backgroundImage
        let backgroundColor

      if (!this.state.playing && !this.state.pasued) {
        backgroundImage = `url(${this.props.thumbnail})`
        backgroundColor = "black"
      } else if (this.state.pasued) {
        backgroundImage = ""
        backgroundColor = ""
      }

        return (
            <div id="video-container">
            <video ref={this.video} className="video" preload="auto" playsInline src={this.props.src} />
            <div className="media-controller">
            {
             this.state.playing === false
             ? <i onClick={() => this.video.current.play()} className="fas fa-play"></i> 
             : <i onClick={() => this.video.current.pause()} className="fas fa-pause"></i> 
            }
            </div>
            <div 
            className={thumbnail}
            style={{
              backgroundColor,
              backgroundImage,
            }}>
            </div>
            <div className="video-progress-bar">
              <button className="video-progress-bar-holder">
                <div className="video-progress-bar-slider" style={{ width: `${Math.floor((this.state.currentTime / this.state.duration) * 100)}%` }} />
              </button>
            </div>
            </div>
        )
    }
}

export default Video;