requestFullScreen API is invalid if I pass it to onChange props

[hijiangtao]

I want to use switch to toggle a fullscreen request, and the code shows below:

onChange() {
	const ExitFullScreen = document.exitFullscreen || 
		document.webkitExitFullscreen || document.mozCancelFullScreen || 
		document.msExitFullscreen;

	if (ExitFullScreen) {
    	ExitFullScreen.call(document);
	}
}

But I got an error throwed be react in development mode like this:

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

and I find that toggle method is called with onClick event. Is it because that onChange is not called directly in toggle?

I think calling other Web API may face the same problem.

[hijiangtao]

I use it within ant-design/ant-design Switch component, and my react version is 16.7.0-beta.2.

[hijiangtao]

I found the reason is I used it in hooks and also wrapped the DOM modification within an arrow function. I should directly modify it and update effect later sometime instead.

Some something for others:

1. Don't call Web API inside hooks like useEffect or uselayoutEffect;
2. Don't wrap your calling inside another function, react will throw a warning tip;