React Basics~useRef/ Videowiedergabe

• useRef ist einer der Reaktions-Hooks, der den Status von DOM-Elementen verfolgt.

• Mit diesem Hook können wir auch den Status von DOM-Elementen steuern.

・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;

・Wir legen einen Wert von useRef als videoRef für das ref-Attribut des Videoelements fest.

・Wenn wir die Schaltfläche drücken, können wir die Videoaktion mithilfe von videoRef.current.pause() oder videoRef.current.play() in der onClick-Funktion der Schaltfläche steuern.

・Dies ist eine Spielaktion.

・Dies ist eine Stoppaktion.

Leider kann ich die Aktion nicht als Video zeigen.

Das obige ist der detaillierte Inhalt vonReact Basics~useRef/ Videowiedergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!