先看效果
image.png
image.png
使用
image.png
前言
之前在react中使用andtd的modal实在是不方便
往往每一个弹框都会写一个Modal类,然后通过setState({})控制显示隐藏.
这样只会造成大量的class类冗余.费时费力,而一个Modal里面可能只有1-2个输入框而已
以前费力的用法
state={
visible:false
}
render() {
return (
<div>
<AddModal
visible={this.state.visible}
cancel={() => {
this.setState({
visible: false,
})
}
/>
</div>
)
}
经过hooks洗礼后,
在实际使用的时候,一般都是与按钮绑定的,那么拦截点击事件,就可以触发显示，
而隐藏则内部消化
这样就可以实现，不是太复杂的modal轻松使用。
<ModalWrapper
title={'测试'}
render={(_form) => (
<div>
<div>哈哈</div>
</div>
)}>
<Button>
测试
</Button>
</ModalWrapper>
<ModalWrapper
title={'测试'}
render={(_form) => (
<div>
<div>哈哈</div>
</div>
)}>
<a>
测试
</a>
</ModalWrapper>
