如何使用 React Hooks 为 Ref 元素添加 onClick 事件？答案

【问题标题】：How can I add onClick event for Ref Element using React Hooks?如何使用 React Hooks 为 Ref 元素添加 onClick 事件？
【发布时间】：2020-05-27 19:45:38
【问题描述】：

我想切换全屏。组件有一个 toggleFullscreen 方法，但在文档中只是类组件。

import React, { useRef } from 'react';

// Components
import { Player } from 'video-react';

export default () => {
const videoRef = useRef(null);

return (
  <div>
   <Player ref={videoRef} 
   src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
  </div>
 );
};

【问题讨论】：

我觉得应该可以，Player组件应该支持ref。至于父组件（这里是你的default），不管Player是实现为函数组件还是类组件都没有关系。当您使用useRef 时，您可以使用ref.current 访问引用。你试过videoRef.current.toggleFullscreen()吗？

标签： reactjs video-reactjs

【解决方案1】：

如果您想在组件安装后立即切换到全屏，您可以使用useEffect 调用该函数

export default () => {
...
  React.useEffect(() => {
    videoRef.current.toggleFullscreen()

    // toggle back to normal mode when the component unmounts (optional)
    return () => {
     videoRef.current.toggleFullscreen()
    }
  }, [])

  return (
    ...
  )
}

重要的部分是[] 作为第二个参数。这样，切换只会在安装组件时调用一次，而不是在每次重新渲染时调用。

【讨论】：

【解决方案2】：

import React, { useRef } from 'react';

// Components
import { Player, BigPlayButton } from 'video-react';

export default () => {
    const videoRef = useRef(null);
    const toggleFullScrn = () => videoRef.current.actions.toggleFullscreen();

    return (
        <div onClick={toggleFullScrn}>
            <Player ref={videoRef} src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4">
                <BigPlayButton />
            </Player>
        </div>
    );
};

【讨论】：