react hooks refs入门应用案例

前言

经典案例是我们想要自定义实现播放器的播放停止按钮

在原生html中我们是这么写的

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生htmltitle>
  head>
  <body>
    <div id="root">
      <video src="视频路径" id="myVideo" onclick="player()">video>
    div>
    <script src="/src/main.js">script>
  body>
html>
const myVideo= document.getElementById("myVideo")
const player = () => {
	if(myVideo.paused){
		myVideo.play()
	}else{
		myVideo.pause()
	}
}

在jquery.js的帮助下我们是这么写的

const player = () => {
  if($('#myVideo').paused){
    $('#myVideo').play()
  }else {
    $('#myVideo').pause()
  }
}

在React中是这么写的

因为我们使用的是React Hooks(函数式)所以我们使用useRef来写,如果是class(对象式)我们就使用createRef(代码是ts的,作为参考)

import {useRef} from "react"

function VideoPage(porps:any){
  const myVideoRef = useRef(null)
  const Player = () => {
    console.log(myVideoRef.current)  //这样就可以获取到元素了
  }
  return (
    <>
      <video src="视频路径" ref={myVideoRef} onClick={()=>Player()}></video>
    </>
  )
}
关于react hooks useRef 的说明

里面的值只有一个那就是current。在这个里面有很多属性我们来看看

  • baseURI: 当前页面路径
  • currentSrc: 视频地址
  • currentTime: 当前视频的时间
  • duration:视频总时间
  • controls: html自己的播放器控件,默认为false
  • id: 视频id。就是
  • autoplay: 视频自动播放,默认为false
  • className: 就是react的class
  • classList: 使用的全部class(列表)
  • hidden:隐藏,默认为false
  • onload:初始化,默认为null可自定义
  • onerror: 错误时调用,默认为null可自定义
  • offsetWidth: 末尾的宽度。只能读取不能修改,但可以通过css来修改
  • offsetHeight : 末尾的高度。只能读取不能修改,但可以通过css来修改
  • offsetLeft: 元素左上角距离页面左边的长度。只能读取不能更改,但可以通过css来修改
  • offsetTop: 元素左上角距离页面顶边的长度。只能读取不能更改,但可以通过css来修改
  • onmousedown: 鼠标按下执行,默认为null可以自行添加
  • onmouseenter: 鼠标指针移动到图像时执行,默认为null可以自行添加
  • onmouseleave: 鼠标指针移出指针时执行, 默认为null可以自行添加
  • onmousemove: 鼠标指针移到指定的元素后执行, 默认为null可以自行添加
  • onmouseout: 鼠标指针移出指定的对象时执行, 默认为null可以自行添加
  • onmouseover: 鼠标指针移动到图片后执行, 默认为null可以自行添加
  • onmouseup: 在用户鼠标按键被松开时执行, 默认为null可以自行添加
  • onmousewheel: 鼠标滚动鼠标滚轮时执行, 默认为null可以自行添加
  • onpaste: 元素上粘贴文本时执行, 默认为null可以自行添加
  • onpause: 在视频暂停时执行, 默认为null可以自行添加
  • onplay: 在视频开始播放时执行, 默认为null可以自行添加
  • onplaying: 在视频暂停后准备开始播放时执行, 默认为null可以自行添加
关于className属性和id的解释案例
{/*react hooks(function)*/}

在这里插入图片描述
在这里插入图片描述

你可能感兴趣的:(React,react.js,javascript,前端)