47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
'use client';
|
|
import { Button } from 'antd';
|
|
import { type FC, useContext, useEffect, useRef, useState } from 'react';
|
|
|
|
import { LoacalContext, locales } from './context/constants';
|
|
import $styles from './style.module.css';
|
|
|
|
const StateDemo2: FC = () => {
|
|
const { local, setLocal } = useContext(LoacalContext);
|
|
const [ghost, setGhost] = useState<boolean>(false);
|
|
const [width, setWidth] = useState(0);
|
|
const toggleGhostBtn = () => setGhost(!ghost);
|
|
const resizeHandle = () => setWidth(window.innerWidth);
|
|
const booleans = useRef(true);
|
|
const changeLocal = () => {
|
|
booleans.current = !booleans.current;
|
|
setLocal(locales[booleans.current ? 1 : 0]);
|
|
};
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined') {
|
|
setWidth(window.innerWidth);
|
|
window.addEventListener('resize', resizeHandle);
|
|
}
|
|
return () => window.removeEventListener('resize', resizeHandle);
|
|
});
|
|
useEffect(() => {
|
|
console.log('切换幽灵按钮');
|
|
}, [ghost]);
|
|
return (
|
|
<div className={$styles.container}>
|
|
<div>{local.label}</div>
|
|
<button type="button" onClick={changeLocal}>
|
|
local
|
|
</button>
|
|
<h2 className="tw-text-center">useEffect Demo</h2>
|
|
<p className="tw-py-5 tw-text-center">{ghost ? 'ghost' : '普通'}按钮</p>
|
|
<div className="tw-flex tw-flex-col tw-justify-center">
|
|
<Button type="primary" onClick={toggleGhostBtn} ghost={ghost}>
|
|
切换按钮样式
|
|
</Button>
|
|
<p className="tw-pt-5 tw-text-center">宽度为: {width}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default StateDemo2;
|