在项目中使用到了antd的Modal.confirm方法,发现获取不到this 项目中需求是这样的:点击删除的时候,弹出confirm框,点击OK的时候请求删除接口项目中的代码如下: const confirm = Modal.confirm; confirm({ title: '确定要删除吗?', onOk(){ this.requestDelete() }) }, onCancel() { console.log('Cancel'); }...
const close = modal(你好 close()}>close ) } modal 重构API 在重构之前,我们先要抽象 alert, confirm, modal 中各自的方法: 从表格可以看出,modal 与其它两个只多了一个 retrun api,其实其它两个也可以返回对应的 Api,只是我们没去调用而已,所以补上: 这样一来,这三个函数从抽象层面上来看是类似的,所...
alert('你好').then(fn)confirm('确定?').then(fn)modal(组件名) 实现 Dialog 源码已经上传到这里。 dialog/dialog.example.tsx, 这里 state ,生命周期使用 React 16.8 新出的 Hook,如果对 Hook 不熟悉可以先看官网文档。 dialog/dialog.example.tsx 代码语言:javascript 复制 importReact,{useState}from'react...
其他两层,天生就不是React掌管的范围,业务模型主要负责维护数据以及数据之间的驱动关系,Side effect backend主要负责实现各种副作用,React的那套模型,在这里帮不上忙——注意,这不代表那两层就完全不能用React,事实上confirm完全可以理解为IO的一种(类比下c语言的scanf)。 也就是说,哪怕一个带有明显数据驱动特色的...
但是,这样的话会报错:打印出来的this是undefined,后来查了一下需要对方法做一下修改才能获取到this。修改如下:将onOk()改为箭头函数形式:onOk: ()=>{} constconfirm=Modal.confirm;confirm({title:'确定要删除吗?',onOk:()=>{this.requestDelete()})},onCancel(){console.log('Cancel');},});...
confirm=record=>{const{status}=this.propsconsttipsInfo=status===dealStatus.alreadyCheck.status?'请确认开启查看吗?':'请确认开启人工审核吗?'Modal.confirm({title:tipsInfo,okText:'确认',cancelText:'取消',onOk:()=>{returnthis.viewDetail(record)// 因为onOk 返回一个promise 就会触发loading效果 我这...
摆脱所谓的 React 哲学:数据驱动视图(view = f(data)),回归原始的window.confirm以及window.alert,很多问题迎刃而解: let mountNode: HTMLDivElement | null = null; LoginModal.show = (props?: LoginModalProps) => { if (!mountNode) { mountNode = document.createElement('div'); ...
confirm({cancelButtonProps: {onClick:() =>{if(this.state.processing) {alert('You cant cancel, processing still un-going') }else{Modal.destroyAll()//use Modal.destroyAll() to destroy the confirm modal} } },onOk:() =>{returnnewPromise((resolve, reject) =>{this.s...
npm install react-imperative-dialog-modal Usage/Examples Example provided with material-ui dialog component use. However can be used with any library or custom dialog similarly. import{DialogBuilder}from"react-imperative-modal-dialog";import{Dialog}from"@mui/material";interfaceMyConfirmDialogComponentProp...
It’s impossible, for example, to click the Confirm button before the modal appears. It’s also impossible for the modal to disappear before the API call to delete the item either succeeds or fails. And it’s impossible to cancel the delete – once they click that button, it’sgone. ...