react hooks refs入门应用案例

已于 2023-04-01 16:13:00 修改
阅读量250 收藏
点赞数
分类专栏： React 文章标签： react.js javascript 前端
于 2023-04-01 15:15:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yasinawolaopo/article/details/129897457
版权
本文介绍了如何在不同环境下实现播放器的播放/停止功能。从原生HTML的JavaScript，到jQuery的简化操作，再到React中利用函数式组件和useRefHook来获取及控制视频元素。在React中，useRef用于获取视频元素的引用，从而实现播放和暂停的控制。此外，还列举了video元素的一些关键属性，如currentTime、duration和各种事件监听器。
摘要由CSDN通过智能技术生成

前言

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

在原生html中我们是这么写的
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生html</title>
  </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 <video>的说明

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

  • baseURI: 当前页面路径
  • currentSrc: 视频地址
  • currentTime: 当前视频的时间
  • duration:视频总时间
  • controls: html自己的播放器控件,默认为false
  • id: 视频id。就是<video src="" id=""></video>
  • 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)*/}
<video src=""
        onClick={()=>Player()} ref={videoRef} className='myVideoClass' id='myVideoId'></video>

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

结城明日奈是我老婆
关注
专栏目录
React Refs 使用场景及核心要点
老司机的后备箱
08-12 1039
Refs 是 React 提供的用来保存 object 引用的一个解决方案，在函数式组件使用 useRef 创建一个 ref 对象，ref 对象存在一个可直接修改的 current 属性，内容都是存在 current 上。Refs 使用场景主要分为两个方向，其一是实现 DOM 访问与操控、在两次render之间传递数据内容【和state机制有很大不同，下文会有对比介绍】。...
React Hooks面试题
m0_67265919的博客
02-28 2350
React Hooks面试题整理 React 加入 Hooks 的意义是什么？为什么 React 要加入Hooks 这一特性？ if else条件判断里使用hooks有什么问题 hooks闭包的坑有哪些？如何解决 常用的Hooks有哪些？ useEffect为什么有时候会出现无限重复请求的问题 useEffect的依赖项里类数组根据什么来判断有没有值变化 React Hooks api的原理： React Hooks如何模拟组件生命周期？ 模拟的生命周期和class中的生命周期有什么区
use-dynamic-refs:动态设置和获取 Refs 的 React 钩子
05-31
React使用动态参考 用 create-react-library 制作 安装 npm install --save use-dynamic-refs 用法 import React , { useEffect } from 'react' ; import useDynamicRefs from 'use-dynamic-refs' ; const Example = ( ) => { const foo = [ 'random_id_1' , 'random_id_2' ] ; const [ getRef , setRef ] = useDynamicRefs ( ) ; useEffect ( ( ) => { // Get ref for specific ID const id1 = getRef ( 'random_id_1' ) ;
React hooks - Ref 使用实例
热门推荐
吃瓜群众的博客
05-19 1万+
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。 useRef() ，它可以很方便地保存任何可变值，其类似于在 class 中使用实例字段的方式 1.获取state的旧值 demo import React,{useState,useRef,useEffect} from "react"; function Example () { const [count, setCo.
React中Hooks几个有用的 ref
最新发布
feixin369的博客
07-18 927
先看下来自官方的介绍，当你希望组件“记住”某些信息，但又不想让这些信息时，你可以使用。
React Hooks—— useRef用法及类组件的三种ref创建使用方式
m0_46569480的博客
06-28 2594
给元素标签设置ref，目的：获取对应的DOM元素给类组件设置ref，目的：获取当前调用组件创建的实例（后续可以根据实例获取子组件中的相关信息）// 基于ref获取子组件的实例，这样基于实例，可以调用子组件内部，挂载到实例上的东西 class Child extends React . Component {state = {x : 1000 };
【React】特性之refs
GY的博客
10-12 446
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
react hooks使用ref对遍历的组件取值方式
wstomc的博客
04-30 5310
父组件代码 import React, { useEffect, useRef } from 'react' import { Button, Upload } from 'antd' import AddCom from './components/add' // 需要遍历的数据 const mapList = [ { key: "1", value: {} }, { key: "2", value: {} }, { key: "3",
React Hooks 与 Vue composition API
weixin_40741265的博客
03-26 819
什么是 hooks 及 hooks 的作用 hooks 是在函数组件中 "钩入" react state 和生命周期等特性的函数。使用 hooks 利于业务逻辑的重用，减小了代码体积。 逻辑复用其他的解决方案存在不足：vue 中使用 minix 混入（在引入文件中进行方法和属性的合并，相同的属性名会覆盖，相同函数名会合并为一个数组，即存在命名冲突问题） react 中使用高阶组件，多层包裹嵌套组件，增加了复杂度和理解成本 vue3 composition API，增加了新的组件选项 setu.
浅谈：React Hooks 异步操作
webfunny2020的博客
05-08 2049
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性，Hook 不会影响你对React概念得理解。 恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。从而使得函数式组件从无状态的变化为有状态的。 React 的类型包 @types/react 中也同步把 React.SFC (St
React Hooks各种函数介绍
weixin_50337713的博客
05-21 509
useState: useState 是用于声明一个状态变量的，用于为函数组件引入状态. useState 只接收一个参数，这个参数可以是数字、字符串、对象等任意值，用于初始化声明的状态 变量。也可以是一个返回初始值的函数，最好是函数，可在渲染时减少不必要的计算。 返回一个长度为2的读写数组，数组的第一项是定义的状态变量本身，第二项是一个用来更新该状 态变量的函数，约定是 set 前缀加上状态的变量名. useState Hook 中返回的 setState 并不会帮我们自动合并对象状态的属性; setSt
React学习（五）— Hooks
小绵杨
07-23 1342
react组件分为类（class）组件和函数（function）组件。class组件是通过继承模版类（Component、PureComponent）的方式开发新组件的，继承是class本身的特性，它支持设置state，会在state改变后重新渲染，可以重写一些父类的方法，这些方法会在React组件渲染的不同阶段调用，叫做生命周期函数。function组件state和类似class组件的生命周期函数的功能，这种api就叫做hooks。灵魂所在。httpshttpshttps。...
React Hooks整理笔记
weixin_49964559的博客
10-10 480
React Hooks 所有组件都将是Function组件，这个函数却有自己的状态（count），同时它还可以更新自己的状态（setCount），除了useState这个hook外，还有很多别的hook，比如useEffect提供了类似于componentDidMount等生命周期钩子的功能，useContext提供了上下文（context）的功能等等。 useRef获取DOM元素和保存变量 useMemo优化React Hooks程序性能 import { useState } from 'react';
hook中使用ref使用
zuo_zuo_blog的博客
09-13 1583
对于antd的fom表单 hook使用ref import React, { useState, useEffect, useRef } from ‘react’; const dateRef = useRef(); dateRef.current.setFieldsValue({ targetCompletionDate: moment(recordTime) }); 父组件： 引入 useRef 声明ref的名字
移动端react-hooks+TS上拉距离顶部一定距离时 改变页面样式
weixin_42215167的博客
08-27 536
const stickyRef = useRef() //创建一个ref <div ref={stickyRef}></div> //关联ref const [sticky, setSticky] = useState(true); //判断是否固定 通过sticky更换样式 const onScroll = () => { const top = stickyRef.current!.getBoundingClientRect() //获取元素距离顶
hooks 系列四：useRefs
XHSRookies的博客
07-30 454
快来加入我们吧！ "小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。 "Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！ 前言 这篇文章，我们主要目的是了解一下 useRefs 的使用. useRefs 定义 u
hook中ref使用
weixin_33842328的博客
05-30 8472
hook使用ref 父组件： 引入 useRef 声明ref的名字 const dateRef = useRef() 复值给组件 ref={dateRef} 使用 dateRef...
常见的React Hooks（必会）
znhyXYG的博客
08-04 2713
React hooks
react技术全家桶（18）字符串形式的ref
weixin_41380194的博客
01-23 490
需求： 自定义组件，功能说明如下：1.点击按钮，提示第一个输入框中的值 2.当第2个输入框失去焦点时，提示这个输入框中的值。 不用你res的写法： class Demo extends React.Component { showData = ()=>{ const input = document.getElementById(‘input1’); alert(input.value); } render() { return ( 点我提示左侧数据 ) } } ReactDOM.render
React Hooks提升受控组件状态管理效率
React 使用 Hooks 简化受控组件状态绑定是React 16.8版本后的一项重要更新，它使得在函数组件中更好地管理状态变得更为直观和灵活。本文将详细介绍如何利用Hooks，如useState和useReducer，来替代传统的类组件方式，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结城明日奈是我老婆

支持一下一直热爱程序的菜鸟吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值