Como fechar um diálogo no React?

Basicamente, no React, o estado geralmente está vinculado ao componente que precisa controlar a renderização. Então, no seu caso, o DialogueWindowé o controle. Isso não decide se o diálogo está aberto ou fechado; isso provavelmente depende do upstream (como app), e é por isso que seu método não funcionará.

Qualquer componente filho ( FileUploader) pode instruir seu componente pai ( DialogueWindow) ou avô ( App) a fazer algo como fechar o diálogo, passando uma função de retorno de chamada como prop . O filho então chama essa função quando o botão é clicado.

Como consertar:

1. Adicione uma variável de estado a app(ou algo equivalente). Isso rastreará se o diálogo está aberto.

2. Appdeve passar o estado e uma função para fechar o diálogo para DialogueWindow.

3. DialogueWindowprecisa passar a função close para FileUploader.

4. FileUploaderO botão cancelar precisa chamar a função fechar acima.

Em App.js (ou equivalente): você precisa adicionar a variável de estado no seu aplicativo e mostrar o diálogo condicionalmente.

function App() {
  const [isDialogueOpen, setIsDialogueOpen] = useState(false);

  const handleOpenDialogue = () => {
    setIsDialogueOpen(true);
  };

  const handleCloseDialogue = () => {
    setIsDialogueOpen(false);
  };

  return (
    <div className="App">
      <h1>My App</h1>
      <button onClick={handleOpenDialogue}>Open File Uploader</button>

      {/* Conditionally render the DialogueWindow based on that state we put up top */}
      {isDialogueOpen && (
        <DialogueWindow
          // Pass the close handler down
          onClose={handleCloseDialogue}
          elements={
            // Pass the close handler down to the FileUploader too.
            <FileUploader onClose={handleCloseDialogue} />
          }
        />
      )}
    </div>
  );
}

export default App;

Em DialougeWindow.js : Pegue um prop onClose e obtenha uma referência direta ao DOM<dialouge>

import React, { useRef, useEffect } from 'react';
import './DialogueWindow.css';

function DialogueWindow({ elements, onClose }) {
  const dialogRef = useRef(null);

  useEffect(() => {
    const dialogElement = dialogRef.current;

    if (dialogElement) {
      dialogElement.showModal();

      const handleNativeClose = () => {
         if (onClose) {
           onClose();
         }
      };
      dialogElement.addEventListener('close', handleNativeClose);

      return () => {
        dialogElement.removeEventListener('close', handleNativeClose);
      };
    }

  }, [onClose]);

  return (
    <div className="backdrop">
      <dialog className="dialogue-window" ref={dialogRef}>
        {elements}
      </dialog>
    </div>
  );
}

export default DialogueWindow;

Em FileUploader.js : agora ele aceita a propriedade onClose de seu pai.

function FileUploader({ onClose }) {

  const handleCancelClick = () => {
    if (onClose) {
      onClose();
    }
  };

  return (
    <div className="file-uploader">
      <h2>Upload File</h2>
      {/* ... file input and status display ... */}
      <div className="file-uploader-button-container">
        <button>
          Upload
        </button>
        <button onClick={handleCancelClick}>
          Cancel
        </button>
      </div>
    </div>
  );
}

export default FileUploader;

O que acontece:

Em App, isDialogueOpen é falso. DialogueWindownão é renderizado.

O usuário clica no botão abrir no App.

handleOpenDialogue no aplicativo é chamado, definindo isDialogueOpen como true.

O React renderiza novamente o aplicativo. Como isDialogueOpen é verdadeiro, DialogueWindowagora ele é renderizado.

Apppassa handleCloseDialogue como onClose para DialogueWindowe também para FileUploaderdentro DialogueWindowda propriedade elements de 's.

DialogueWindowmontagens. Seu useEffect é executado, chamando dialogRef.current.showModal(), o que significa que a caixa de diálogo nativa agora está visível. Em seguida, ele adiciona o ouvinte de evento nativo close para que possamos modificá-lo posteriormente.

O FileUploader é montado dentro do DialogueWindow. Ele recebe handleCloseDialogue como sua propriedade onClose.

O usuário clica no botão "Cancelar" no FileUploader.

handleCancelClick no FileUploader é chamado, o que executa props.onClose().

handleCloseDialogue no aplicativo é chamado, definindo isDialogueOpen novamente como falso.

O React renderiza novamente o aplicativo. Como isDialogueOpen é falso, a renderização condicional isDialogueOpen && (...) é falsa e DialogueWindowé removida do DOM.

Ao DialogueWindowdesmontar, o React limpa o useEffect, removendo o ouvinte nativo do evento close. O elemento nativo dialog também é removido do DOM.

Faz sentido?

Você pode ler mais sobre estado e adereços em React Learn: Gerenciando estado e React Learn: Escotilhas de escape

A maneira típica de fazer isso é adicionando uma variável de estado que determina se <DialogueWindow />ele será renderizado ou não.

A variável de estado será controlada por meio de uma função, que precisa ser passada do pai para onde o Cancelbotão está.

Também pode ser necessário chamar onCloseapós um Upload bem-sucedido para evitar que a caixa de diálogo fique visível para sempre.

Aplicativo.js:

import { useState } from "react";
import DialogueWindow from "./DialogueWindow";
import FileUploader from "./FileUploader";

function App() {
  const [showUploader, setShowUploader] = useState(true);

  const closeUploader = () => setShowUploader(false);

  return (
    <div>
      {showUploader &&
        <DialogueWindow
          elements={<FileUploader onClose={closeUploader} />}
        />
      }
    </div>
  );
}

FileUploader.js:

function FileUploader({ onClose }) {
  ...
  return (
    <div className="file-uploader">
      ...
      <div className="file-uploader-button-container">
        <button>Upload</button>
        <button onClick={onClose}>Cancel</button>
      </div>
    </div>
  );
}
export default FileUploader;