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'));