先看效果
image.png
image.png
使用
image.png
前言
之前在react中使用andtd的modal實(shí)在是不方便
往往每一個彈框都會寫一個Modal類,然后通過setState({})控制顯示隱藏.
這樣只會造成大量的class類冗余.費(fèi)時費(fèi)力,而一個Modal里面可能只有1-2個輸入框而已
以前費(fèi)力的用法
state={
visible:false
}
render() {
return (
<div>
<AddModal
visible={this.state.visible}
cancel={() => {
this.setState({
visible: false,
})
}
/>
</div>
)
}
經(jīng)過hooks洗禮后,
在實(shí)際使用的時候,一般都是與按鈕綁定的,那么攔截點(diǎn)擊事件,就可以觸發(fā)顯示戳杀，
而隱藏則內(nèi)部消化
這樣就可以實(shí)現(xiàn)，不是太復(fù)雜的modal輕松使用。
<ModalWrapper
title={'測試'}
render={(_form) => (
<div>
<div>哈哈</div>
</div>
)}>
<Button>
測試
</Button>
</ModalWrapper>
<ModalWrapper
title={'測試'}
render={(_form) => (
<div>
<div>哈哈</div>
</div>
)}>
<a>
測試
</a>
</ModalWrapper>
