如何點擊進度條的div元素的position

Question

我的應用程序中有一個 HTML5 視頻面板。 我設法制作了一個運行良好的進度條。 但我還希望能夠通過單擊進度條上的任何 position 來更改視頻的currentTime 。

如何使用 React 獲得當前 position 作為比率？ 我在谷歌上搜索了進度條組件，但似乎它們都沒有給出點擊 position 的value ，但只是顯示。

或者簡單地說，當用戶單擊進度條的不同 position 時，我想將進度條的值更改/獲取到該 position。

更新：

我已經更新了演示，多次單擊時進度條似乎變得瘋狂，而且似乎也不接近單擊的 position。

演示： https://stackblitz.com/edit/react-ts-zudlbe?file=index.tsx

Answer 1

這是我測試過的整個組件。 似乎工作

const ProgressBar = ({ duration, progress }: ProgressProps) => {
  return (
    <div
      onClick={(event: React.MouseEvent<HTMLDivElement>) => {
        // duration is the video duration. For example 152.
        // How can i catch the % (ratio) of clicked position of this progrssbar?
        // then I will send this % (lets say 5) to the seek function like:
        const x = (event.clientX * duration) / event.currentTarget.offsetWidth; // how to get sec?
        callback(x);
      }}
      style={{
        backgroundColor: "#ddd",
        borderRadius: 3,
        flex: 1,
        height: 6,
        overflow: "hidden",
        position: "relative"
      }}
    >
      <Progress progress={progress} />
    </div>
  );
};