全屏展示可视化全屏展示

const [fullScreen, setFullScreen] = useState(false);

  import React, {
    
     useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import {
    
    
  Form,
  Input,
  InputNumber,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete,
} from 'antd';




const RegistrationForm = () => {
    
    
  const [form] = Form.useForm();
  const canvas = React.useRef(null);
  const capture = React.useRef(false);
  const ref = React.useRef(null);

  const [fullScreen, setFullScreen] = useState(false);

  useEffect(() => {
    
    
    document.addEventListener('fullscreenchange', () => {
    
    
      if (capture.current === true) {
    
    
        if (document.fullscreenElement) {
    
    
          setFullScreen(true);
          // if (setDragScreen) {
    
    
          //   setDragScreen(true);
          // }
        } else {
    
    
          capture.current = false;
          setFullScreen(false);
          // if (setDragScreen) {
    
    
          //   setDragScreen(false);
          // }
        }
      }
    });
  }, []);
  useEffect(() => {
    
    
    setTimeout(() => {
    
    
      if (canvas.current && ref.current) {
    
    
        if (fullScreen) {
    
    
          canvas.current.changeSize(window.innerWidth, window.innerHeight);
          // canvas.current.render();scrollWidth
          document.body.classList.add('full-open----');
        } else {
    
    
          canvas.current.changeSize(window.innerWidth, 650);

          // canvas.current.render();
          document.body.classList.remove('full-open----');
        }
      }
    }, 100);
  }, [fullScreen]);
  const onFinish = (values) => {
    
    
    console.log('Received values of form: ', values);
  };

  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select
        style={
    
    {
    
    
          width: 70,
        }}
      >
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  );
  const suffixSelector = (
    <Form.Item name="suffix" noStyle>
      <Select
        style={
    
    {
    
    
          width: 70,
        }}
      >
        <Option value="USD">$</Option>
        <Option value="CNY">¥</Option>
      </Select>
    </Form.Item>
  );
  const [autoCompleteResult, setAutoCompleteResult] = useState([]);

  const onWebsiteChange = (value) => {
    
    
    if (!value) {
    
    
      setAutoCompleteResult([]);
    } else {
    
    
      setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${
      
      value}${
      
      domain}`));
    }
  };

  const websiteOptions = autoCompleteResult.map((website) => ({
    
    
    label: website,
    value: website,
  }));
  const styleRoot = {
    
    
    position: 'relative',
    width: '100%',
    height: '100%',
    userSelect: 'none',
  };
  const styleRoots = {
    
    
    width: '100%',
    height: '100%',
    userSelect: 'none',
    position: 'fixed',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    zIndex: 999,
    background: '#fff',
  };
  return (
    <div style={
    
    !fullScreen ? styleRoot : styleRoots}>
      <Button
                      onClick={
    
    () => {
    
    
                        if (document.fullscreenElement) {
    
    
                          document.exitFullscreen();
                        } else {
    
    
                          capture.current = true;
                          document.documentElement.requestFullscreen();
                        }
                      }}
                    >
                      {
    
    fullScreen ? '退出全屏' : '全屏显示'}
                    </Button>
                    <div>全屏展示的div</div>
  ></div>
  );
};

ReactDOM.render(<RegistrationForm />, document.getElementById('container'));