React 实现页面全屏效果

HTML代码：

全屏

js代码：

state = {   
    isFullScreen: false
}	
componentDidMount = () => {
	this.watchFullScreen()
}
    
fullScreen = () => {
console.log('fullscreen:',this.state.isFullScreen);
    if (!this.state.isFullScreen) {
      this.requestFullScreen();
    } else {
      this.exitFullscreen();
    }
};

//进入全屏
requestFullScreen = () => {
 console.log('requestFullScreen')
  	var de = document.documentElement;
  	if (de.requestFullscreen) {
    	de.requestFullscreen();
  	} else if (de.mozRequestFullScreen) {
    	de.mozRequestFullScreen();
  	} else if (de.webkitRequestFullScreen) {
    	de.webkitRequestFullScreen();
  	}
};

//退出全屏
exitFullscreen = () => {
console.log('exitFullscreen')
	var de = document;
  	if (de.exitFullscreen) {
    	de.exitFullscreen();
  	} else if (de.mozCancelFullScreen) {
   	 de.mozCancelFullScreen();
  	} else if (de.webkitCancelFullScreen) {
    	de.webkitCancelFullScreen();
  	}
};

//监听fullscreenchange事件
watchFullScreen = () => {
	const _self = this;
  	document.addEventListener(
    "webkitfullscreenchange",
    function() {
      _self.setState({
        isFullScreen: document.webkitIsFullScreen
      });
	},
	false
	);
};