react-antd Modal实用封装

先看效果

image.png

image.png

使用

image.png

前言

之前在react中使用andtd的modal实在是不方便
往往每一个弹框都会写一个Modal类,然后通过setState({})控制显示隐藏.
这样只会造成大量的class类冗余.费时费力,而一个Modal里面可能只有1-2个输入框而已

以前费力的用法

state={
   visible:false
}
render() {
 return ( 
    

          {
                 this.setState({
                    visible: false,
                  })
              }
        />
   
  )
}

经过hooks洗礼后,

在实际使用的时候,一般都是与按钮绑定的,那么拦截点击事件,就可以触发显示，
而隐藏则内部消化

这样就可以实现，不是太复杂的modal轻松使用。

 (
        

            
哈哈
        
    )}>
    
        测试
    

 (
        

            
哈哈
        
    )}>
    
        测试
    

具体实现