如何处理“外部"问题?单击带有material-ui的对话框(模态) [英] How to handle "outside" click on Dialog (Modal) with material-ui
本文介绍了如何处理“外部"问题?单击带有material-ui的对话框(模态)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在框外单击时,框关闭,这使我丢失所有输入. 我希望仅在单击取消"按钮时关闭我的框. 我不知道是什么原因导致在单击外部时将其关闭.有帮助吗?
My box closes when clicking outside of the box making me lose all the input. I want my box to close only when clicking on the cancel button. I am not sure what is making it close when clicking outside. Any help?
我正在使用@ material-ui/core
I am using @material-ui/core
_close() {
DeviceCreationActions.close();
}
render() {
const actions = [
<Button
id="device-create-dialog-close"
key="device-create-dialog-close"
onClick={this._close}
>
{this.context.intl.formatMessage({id: 'Cancel'})}
</Button>
];
if (0 < this.state.stepIndex) {
actions.push(<Button
id="device-create-dialog-back"
key="device-create-dialog-back"
onClick={this._previousStep.bind(this)}
>
{this.context.intl.formatMessage({id: 'Back'})}
</Button>
);
}
if (
(1 >= this.state.stepIndex && 0 < this.state['formStep' + this.state.stepIndex].length) ||
(0 < this.state.stepIndex)
) {
actions.push(<Button
id="device-create-dialog-next"
key="device-create-dialog-next"
onClick={2 === this.state.stepIndex ? this._save.bind(this) : this._nextStep.bind(this)}
>
{this.context.intl.formatMessage({id: 2 === this.state.stepIndex ? 'Create' : 'Next'})}
</Button>
);
}
推荐答案
我认为您需要的是将disableBackdropClick
传递给<Modal />
组件
I think what you need is disableBackdropClick
passed down to <Modal />
component
<Modal disableBackdropClick />
您还可以使用disableEscapeKeyDown
prop
You can also disable close Dialog on Esc key press with disableEscapeKeyDown
prop
这篇关于如何处理“外部"问题?单击带有material-ui的对话框(模态)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文