React和VideoJS-onClick事件

Question

我有使用videoJS播放视频的React应用程序。我想覆盖click事件。点击视频后，它应在播放视频之前执行一项操作（例如，控制台日志）。

这是视频组件的构建方式

import React from 'react';
import VideoPlayer from '../Player/VideoPlayer'

const VideoDetail = ({video}) => {
    //Check if video object is valid
    if(!video) {
        return <div>Loading...</div>
    }

    return (
        <div className="video-detail col-md-8">
            <div className="details">
                <div className="video-app-title">{video.title}</div>
                <div>{video.description}</div>
            </div>
            <div>
                <VideoPlayer {...{
                        autoPlay: true,
                        controls: true,
                        poster: video.poster,
                        fileName : video.fileName,
                        sources: [{
                            src: video.source,
                        }]
                    }}
                />
            </div>
        </div>
    );
}

export default VideoDetail;

VideoJS的结构如下所示

    import React, { Component } from 'react';  //React module is imported.

export default class VideoPlayer extends Component {
    componentDidMount() {    
      this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
        document.getElementById('vjs_video_3_html5_api').onclick = function() {
          console.log('clicked');
        }
      });
    }

    reportAndPlay() {
      console.log('called');
    }

    componentWillUnmount() {
      if (this.player) {
        this.player.dispose();
      }
    }

    render() {  
      return (
        <video
          className="video-js vjs-default-skin vjs-big-play-centered"
          height="360"
          ref={(c) => { this.videoNode = c; }}
          width="640" />
      );
    }
}

它没有按预期工作。单击事件仅在单击后触发。