如何开始播放视频点击它没有控制使用反应?

我在react应用程序中使用standart video html5播放器:

const Video = ({ url, contentType }) => (
  <video poster={url}>
    <source src={`${url}#t=0.01`} type={contentType} className="video" />
  </video>
)

javascript :

var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
    if (videoPlaying) {
        video.pause();
        videoPlaying = false;
    }
    else {
        video.play();
        videoPlaying = true;
    }
}

但我不知道如何用react代替它,我试图补充 onClick{e => e.play} e 包含,它不包含任何 isPlaying 旗帜或 play/pause 可能的话,请告诉我怎样才能正确地处理它?