antd design 多个弹框设置区分状态的技巧

可以使用 enum 枚举的方式去做区分

// 置管状态区分
// eslint-disable-next-line no-shadow
export enum catheteringType {
  ADD = 'add',
  EDIT = 'edit',
  EXAMINE = 'examine',
}

引入上述代码接着设置状态

  //  置管记录弹框/状态区分
  const [catheteringModalTypeConfig, setCatheteringModalTypeConfig] = useState(catheteringType.ADD)

 通过某些事件   比如 查看或者编辑的时候修改定义的 modal 弹框状态

 

后续也可以在设置 modal 弹框 title 标题的时候写一个函数去做区分

  // 我用函数搞一下看他是啥状态
  const diffTubeDrawingModalTitleFont = () => {
    let str = ''
    switch (catheteringType) {
      case 'add':
        str = '增加拔管'
        break
      case 'edit':
        str = '编辑拔管'
        break
      case 'examine':
        str = '查看拔管'
        break
      default:
        break
    }
    return str
  }

去使用就好了

 

时小记，终有成。