React 实现页面全屏效果

HTML代码：

<a
	onClick={this.fullScreen}
	style={{ margin: "0 6px 0 6px"}}
>全屏</a>

js代码：

state = {   
    isFullScreen: false
    }	
    
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(
	"fullscreenchange",
	function() {
  	_self.setState({
    isFullScreen: document.fullscreen
  });
},
false
);

document.addEventListener(
"mozfullscreenchange",
function() {
  _self.setState({
    isFullScreen: document.mozFullScreen
  });
},
false
);

document.addEventListener(
"webkitfullscreenchange",
function() {
  _self.setState({
    isFullScreen: document.webkitIsFullScreen
  });
},
false
);
};