反应中的对话链
反应中的对话链
提问于 2020-09-14 15:10:41
在jquery中，我经常使用模态对话框链接技术。F.e.
$.Deferred().resolve().promise()
.then(function ()
{
return runDialog1(someProps); // return promise
})
.then(function (runDialog1Result)
{
... some processing
return runDialog2(muchMoreProps); // return promise
})
.then(function (runDialog2Result)
{
... some more processing
postDataToServer(someDialog1AndDialog2Props);
})
);在react中，我不得不使用状态来显示/隐藏模态对话框和道具方法。
<CustomDialog
open={this.state.isCusomDialogOpen}
onOk={this.onCustomDialogOk}
onCancel={this.onCustomDialogCancel}
...是否有办法使模态对话框在反应中“链状”？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-09-14 16:08:27
如果您不介意为此添加一个库，react-modal-promise提供了一个非常好的API，这与您所描述的几乎完全一样。你可以这样使用它：
const App = {
// ...
return (
// ...
<ModalContainer />
// ...
)
}
const MyModal = ({ isOpen, onResolve, message }) => (
<Modal open={isOpen} onHide={() => onResolve(false)}>
{message}
<button onClick={() => onResolve(true)}>Confirm</button>
</Modal>
)
const myPromiseModal = createModal(MyModal)
// bare promises
myPromiseModal({ message: 'Confirm value 1?' })
.then(value1 => {
doStuff(value1)
return myPromiseModal({ message: 'Confirm value 2?' })
}).then(value2 => {
doStuff(value2)
})
// async/await
const value1 = await myPromiseModal({ message: 'Confirm value 1?' })
doStuff(value1)
const value2 = await myPromiseModal({ message: 'Confirm value 2?' })
doStuff(value2)Stack Overflow用户
发布于 2021-09-07 05:20:08
您可以看看：https://github.com/eBay/nice-modal-react。它提供了管理modals的承诺api。
Stack Overflow用户
发布于 2020-09-14 15:18:51
您必须为CustomDialog组件中的每个步骤添加一个开关。一种模式可以是：
<CustomDialog open={!!this.state.isCusomDialogOpen}>
<>
{
this.state.isCusomDialogOpen === 1 && (
<div>step 1</div>
)
}
{
this.state.isCusomDialogOpen === 2 && (
<div>step 2</div>
)
}
</>
</CustomDialog>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63887081
复制相关文章
相似问题
腾讯云开发者
