useToggle组件封装useToggle组件封装

115 阅读 0 评论 76 点赞

我是靠谱客的博主深情月饼，这篇文章主要介绍useToggle组件封装useToggle组件封装，现在分享给大家，希望可以做个参考。

useToggle组件封装

只针对对Boolean之间的切换，简洁直观

复制代码

1
2
3
4
5
6
7
8
9
10
import { useState } from 'react';
const useToggle = (initialState:boolean = false) => {
const [toggle, setToggle] = useState(initialState);
const switchToogle: any = () => {
setToggle(!toggle);
};
return [toggle, switchToogle];
};
export default useToggle;

使用实例：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import * as React from 'react';
import useToggle from '../useToggle/index'
import { Modal} from 'antd'
export default function Name() {
const [tagVis, setTagVis] = useToggle(false)
const changeModal=()=>{
setTagVis() //调用函数即可来回切换Modal展示
}
return (
<div>
<Modal
title={tagTitle}
visible={tagVis}
onCancel={changeModal}
onOk={changeModal}
>
切换modal来回展示！！！
</Modal>
</div>
)
}