先看效果

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>

具体实现