如何处理“外"点击 Dialog (Modal) with material-ui

2022-01-17 00:00:00 reactjs dialog modal-dialog javascript 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 传递给 组件

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

相关文章