需求
需要根据窗口大小自适应 Form
布局
实现思路
- 获取当前窗口大小
- 定义默认布局
- 监听窗口变化
- uesEffect 改变布局
代码实现
// 1.获取当前窗口大小
const getWindowSize = () => ({
innerHeight: window.innerHeight,
innerWidth: window.innerWidth,
});
// 2.定义默认布局
const [layout, setLayout] = useState<'horizontal' | 'vertical'>('horizontal');
const formLayout =
layout === 'horizontal'
? {
labelCol: { sm: { span: 6 }, xl: { span: 10 } },
wrapperCol: { sm: { span: 4 }, xl: { span: 14 } },
}
: {};
// 3.监听窗口变化
const handleResize = () => {
setWindowSize(getWindowSize());
};
useEffect(() => {
// 监听
window.addEventListener('resize', handleResize);
// 销毁
return () => window.removeEventListener('resize', handleResize);
}, []);
// 4.uesEffect改变布局
useEffect(() => {
if (windowSize.innerWidth < 1444) {
setLayout('vertical');
} else {
setLayout('horizontal');
}
}, [windowSize]);
Form 组件
<form
className="{styles.propertiesForm}"
form="{form}"
onFinish="{submitForm}"
layout="{layout}"
{...formLayout}
>
{renderForm()}
</form>