react 的 ref 按钮异步点击调用方法

API方法调用：

1. const player = useRef();

2.<div ref={inputRef}> 要添加的内容 </div>

3. <Button onClick={()=>bigView(inputRef)} />

4.const bigView = a => { a.current.toggleFullscreen(); };

说明：1.react要引入useRef(); 4.a是参数，可以随便命名。.current是固定的。

----------------------------------------------------------------------------------------------

子组件方法调用：

如果是调用子组件的方法，则需要在子组件添加useImperativeHandle暴露给父组件要调用的方法

useImperativeHandle(() => ({ showViewer: () => { setIsView(true); }, }));

子组件

import * as React from 'react';
import PropTypes from 'prop-types';
import { BigPlayButton, ControlBar, Player, PlayToggle } from 'video-react';
import { useImperativeHandle, useState } from 'react';const VideoLargeView = ({ item, cRef }) => {const [isView, setIsView] = useState(false);const closeViewer = () => {setIsView(false);};useImperativeHandle(cRef, () => ({showViewer: () => {setIsView(true);},}));return (<>{/* 视频放大 */}<div className="maskbox" onClick={closeViewer} style={{ display: isView ? 'block' : 'none' }}><img className="big-view-close" onClick={closeViewer} src="/images/Icon_close.svg" /><div className="img-vedio-hw"><PlayerplaysInlineposter={''}SeekBar={false}disableDefaultControls={true}autoPlaysrc={item._url}loopmaxHeight="450"className="playvideo"muted={true}><ControlBar disableCompletely={true}><BigPlayButton position={'videoBtnHide'} /><PlayToggle disable /></ControlBar></Player></div></div></>);
};VideoLargeView.propTypes = {item: PropTypes.any,cRef: PropTypes.object,
};export default VideoLargeView;

父组件

import { useRef } from 'react';import VideoLargeView from './VideoLargeView';const NftDetailLargeView = ({ item }) => {const inputRef = useRef(null)const showViewer1 = () => {inputRef.current.showViewer();};return (<><Button onClick={showViewer1} />{/* 视频放大 */}<VideoLargeView cRef={inputRef} item={item}></VideoLargeView></>
)}

补充最重要的一点，不同的父组件调用同一个子组件， ref={inputRef}的player都要命名不同名字，不然就会有一个报undefined

react 的 ref 按钮异步点击调用方法相关推荐

注册按钮php,JavaScript_javascript实现十秒钟后注册按钮可点击的方法，本文实例讲述了javascript实现十 - phpStudy...
javascript实现十秒钟后注册按钮可点击的方法本文实例讲述了javascript实现十秒钟后注册按钮可点击的方法.分享给大家供大家参考.具体分析如下: 1.注册按钮初始状态为不可用,disab ...
JavaScript笔记-表格中放按钮并点击调用
最终功能是这样的: 这个表格中存放了2个按钮,如购买份额,点击到指定页面,这里将url中添加一个id字段如点击后: 对应的表格代码是这样的: <tbody>{foreach $model ...
微信小游戏中监听一个按钮的点击事件方法
首先肯定是看API文档,如图所示但初学者特别是自学者看的一脸迷惘不知所措,又没有实例.所有我来写一下我的做法,有什么错误请大家指出一起交流一下哈! 直接看代码清楚点 let points = [{x ...
防止按钮快速点击的方法
public class Utils {// 两次点击按钮之间的点击间隔不能少于1000毫秒private static final int MIN_CLICK_DELAY_TIME = 1000;p ...
设置html按钮点击事件无效果,css怎么设置按钮不能点击？
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...
【已解】英雄联盟lol撸啊撸“寻找对局”按钮无法点击，开不了赛解决方法
问题描述 lol现在已经有些年头了,随着时间的推移,客户端是越来越漂亮,越来越简洁,但实际上也越来越占CPU和内存,有这么一种情况,在进入队列界面后,选择好自己要打的位置,没法点击寻找对局,导致lol ...
html页面调用php方法,如何从HTML按钮点击调用PHP函数？
有人可以帮我一些JavaScript,当我点击一个按钮时,我可以调用一个函数吗?如何从HTML按钮点击调用PHP函数? 我知道这之前已经公布,但每一个我所看到的答案是太含糊,我一直在这个现在8小时:( ...
js按钮点击事件，调用方法
<html><head><title>usually function</title></head><script> funct ...
微信小程序中的页面跳转（通过点击按钮、调用方法的形式）
页面跳转用的多吧.tabBar的空间有限.通过路由的方式跳转时Vue中常用的方式.小程序采用类似的做法. – 这里通过给按钮绑定点击事件.调用方法.方法中实现页面跳转.(其它方式暂不考虑) 1.效果 ...

react 的 ref 按钮异步点击调用方法

react 的 ref 按钮异步点击调用方法相关推荐

最新文章

热门文章