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

Question

我想切换全屏。组件有一个 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>
 );
};

Answer 1

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

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

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

  return (
    ...
  )
}

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

Answer 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>
    );
};