React 基础知识~useRef/ 视频播放

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《React 基础知识~useRef/ 视频播放》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

• useref 是跟踪 dom 元素状态的 react hook 之一。

• 我们还可以使用这个钩子来控制 dom 元素的状态。

・src/example.js

import { useRef, useState } from "react";

const Video = () => {
  const [playing, setPlaying] = useState();
  const videoRef = useRef();

  return (
    <div>
      <video style={{ maxWidth: "100%" }} ref={videoRef}>
        <source src="./sample.mp4"></source>
      </video>
      <button
        onClick={() => {
          if (playing) {
            videoRef.current.pause();
          } else {
            videoRef.current.play();
          }
          setPlaying((prev) => !prev);
        }}
      >
        {playing ? "Stop" : "Play"}
      </button>
    </div>
  );
};

const Example = () => {
  return (
    <>
      <Video />
    </>
  );
};

export default Example;

・我们将 useref 的值设置为 videoref 到视频元素的 ref 属性。

・当我们按下按钮时，我们可以使用按钮的 onclick 函数中的 videoref.current.pause() 或 videoref.current.play() 来控制视频动作。

・这是一个玩耍动作。

・这是一个停止动作。

抱歉，我无法以视频形式显示该动作。

今天关于《React 基础知识~useRef/ 视频播放》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！