[ Dialog ( Modal ) ](모달)을 클릭하여 "Outside" 클릭을 처리하는 방법

[ Dialog ( Modal ) ](모달)을 클릭하여 "Outside" 클릭을 처리하는 방법

상자 밖을 클릭하면 상자가 닫히므로 입력이 모두 손실됩니다.취소 버튼을 클릭할 때만 상자를 닫았으면 합니다.밖을 클릭할 때 무엇이 닫히는지 잘 모르겠어요.도움이 필요하신가요?

@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머티리얼 UI v5에서는 동작하지 않습니다.

대화 상자 API(다음)

이행가이드의 코드를 사용하여 각 클로징소스를 수동으로 처리할 수 있습니다.onClose prop종료 이벤트의 소스를 감지함으로써요.

<Dialog onClose={handleClose} />

그리고 핸들러를 사용해서 멈추세요.

const handleClose = (event, reason) => {
    if (reason && reason == "backdropClick") 
        return;
    myCloseModal();
}

네가 필요한 건disableBackdropClick에 전해지다<Modal />요소

<Modal disableBackdropClick />

또한 Esc 키 누름 시 닫기 대화 상자를 비활성화할 수도 있습니다.disableEscapeKeyDown받침대

삭제만 하면 됩니다.onClose방법

  <Dialog
     sx={{
       position: 'absolute',
       left: 300,
       top: 35
     }}
     maxWidth="lg"
    open={open}
    // onClose={handleClose}
   .....

const handleClose = (event, reason) => {
    if (reason && reason == "backdropClick" && "escapeKeyDown") 
        return;
    myCloseModal();
}

이렇게 하면 외부 클릭과 이스케이프 버튼이 닫히지 않습니다.

Dialog 태그에서 onClose 이벤트 기능을 제거합니다.그런 다음 아래에 단추를 추가하십시오. '취소'라고 하면 함수를 호출하여 대화 상자를 닫을 수 있습니다.

const handleClose = () => {
 setOpen(false)
}

<Dialog
  fullWidth={true}
  open={open}
>
....
 <DialogActions>
    <Button onClick={handleClose} disabled={loading}>Cancel</Button>
 </DialogActions>
</Dialog>

컴포넌트에 "Disable Backdrop Click" 프로펠러를 추가하기만 하면 됩니다.그러면 팝업 또는 대화 상자의 외부 클릭이 제한(비활성화)됩니다.

    //Example
    <DialogCss
      style={{ zIndex: 2000 }}
      open={ruleBoxOpen}
      keepMounted
      onClose={() => setRuleBoxOpen(false)}
      aria-labelledby="alert-dialog-slide-title"
      aria-describedby="alert-dialog-slide-description"
      disableBackdropClick
    >

다음과 같은 유사한 컴포넌트를 작성할 수 있습니다.

import React, { ReactNode } from "react";

export function CustomDialog(props: {
  open: boolean;
  children: ReactNode;
}) {
  if (!props.open) return <></>;
  return (
    <div
      style={{
        position: "fixed",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
      }}
    >
      {props.children}
    </div>
  );
}

이게 도움이 됐으면 좋겠네요!

이것도 제 문제인데 아무도 잘 대답하지 못하는 것 같아요.이게 내가 한 일이야.

를 삭제합니다.onClose에서<Dialog >랩퍼, 즉, 이것이 그 방법이에요.<Dialog>다음과 같이 표시됩니다.

<Dialog
    sx={{
        position: 'absolute',
        left: 300,
        top: 35
    }}
    maxWidth="lg"
    open={open}
    // onClose={handleClose}      <<<<<<<
    ....
>

마지막으로,handleClose기능하다onClick의 이벤트close버튼을 클릭합니다.

<Button
    color="primary"
    size="large"
    type="submit"
    variant="contained"
    onClick={handleClose}
>
    Close
</Button>

당신의 문제는 해결될 거예요.

부터disableBackdropClick최신 버전의 material ui에서는 권장되지 않기 때문에 를 쉽게 제거할 수 있습니다.onClose대화상자 속성에서 버튼을 추가합니다.DialogTitle발사하다handleClose열기 대화상자 상태를 false로 설정하는 버튼을 클릭한 후 기능합니다.

<Dialog
  // onClose={handleClose} // the line to be removed
  open={dialog.open}
  fullWidth
  maxWidth="md"
  >
  <DialogTitle
    sx={{
      display: 'flex',
      alignItems: 'center',
    }}
  >
    <Typography
      variant="h5"
      textAlign="center"
      component="h1"
      gutterBottom
      sx={{
        pl: 2,
      }}
    >
      {dialog.action === 'add'
        ? 'Ajouter une question'
        : 'Editer la question'}
    </Typography>
    
    {/*Fire handleClose after a click on close button*/}
    <IconButton onClick={handleClose} sx={{ ml: 'auto' }}>
      <CloseIcon />
    </IconButton>
  </DialogTitle>
  <QuestionForm
    dimensionId={dimensionId}
    action={dialog.action}
    questionData={dialog.data}
    handleClose={handleClose}
    setQuestions={setQuestions}
    setRows={setRows}
  />
</Dialog>

언급URL : https://stackoverflow.com/questions/57329278/how-to-handle-outside-click-on-dialog-modal