时间戳

首页 > 解决方案 > onClick 传递给 React Player 的 Wrapper 不起作用

javascript - onClick 传递给 React Player 的 Wrapper 不起作用

问题描述

我需要展示 Youtube 视频，所以我使用的是 React Player。单击我的视频，我必须将其全屏显示。这是我的代码：

import ReactPlayer from 'react-player/lazy';
import { SerializedStyles } from '@emotion/core';
import _pick from 'lodash/pick';

import { StyledPlayerContainer, StyledContainer } from './style';

export const PROPS_TO_PICK_FOR_REACT_PLAYER = [
  'controls',
  'loop',
  'muted',
  'height',
  'width',
  'url'
];

export interface Props {
  autoPlay?: boolean;
  controls?: boolean;
  loop?: boolean;
  muted?: boolean;
  height?: string;
  width?: string;
  url: string;
  containerStyles?: SerializedStyles;
  playerContainerStyles?: SerializedStyles;
  onClick: (e: MouseEvent) => void;
}

const Wrapper = ({ children }) => <div>{children}</div>

const Player: React.FC<Props> = (props) => {
  const { onClick, containerStyles, autoPlay, playerContainerStyles } = props;
  return(
    <StyledContainer css={containerStyles}>
       <StyledPlayerContainer css={playerContainerStyles}>
        <ReactPlayer
          {..._pick(props, PROPS_TO_PICK_FOR_REACT_PLAYER)}
          playing={autoPlay}
          onClick={onClick}
          wrapper={Wrapper}
        />
     </StyledPlayerContainer>
    </StyledContainer>
  )
}

Player.defaultProps = {
  controls: true,
  height: '100%',
  width: '100%',
  loop: false,
  muted: false,
  autoPlay: true,
};

export default Player;

根据 React-Player 文档，我可以传递一个包装器，并且 onClick 来响应播放器，并且 onClick 将被提供给我的包装器。正如在 devtools 中检查的那样，点击处理程序正在附加到我的包装器上，但它没有被调用。也尝试将 onClick 应用到 StyledContainer 和 StyledPlayerContainer 但它没有被调用。

标签： javascriptreactjsyoutube-apireact-player

解决方案

当传递给 react-player 的包装器时，onClick 将永远无法工作，因为 react-player 为 youtube 安装了 iframe。iframe 充当单独的文档，因此，事件从 iframe 开始并在 iframe 结束，这意味着捕获从 iframe 开始，传播仅在 iframe 结束，因此，包装器的 onClick 永远不会被调用。

推荐阅读