Modale Fenster sind ein häufiges UI-Element in Webanwendungen. Sie werden verwendet, um wichtige Informationen anzuzeigen, Benutzereingaben anzufordern oder eine Aktion zu bestätigen. Obwohl modale Fenster hilfreich sein können, kann es auch schwierig sein, sie zu verwalten, insbesondere wenn Sie mehrere modale Fenster auf Ihrer Seite haben.

In diesem Artikel zeigen wir Ihnen, wie Sie useModalin React einen Hook erstellen, der das Erstellen und Verwalten modaler Fenster vereinfacht. Mit diesem Hook können Sie Modale einfach öffnen und schließen, Daten an sie übergeben und Benutzerinteraktionen verarbeiten.

useModalDen Hook erstellen

Um den useModalHook zu erstellen, verwenden wir den useStateHook von React, um den Status des Modals zu verwalten. Der useStateHook gibt ein Array mit zwei Elementen zurück: dem aktuellen Statuswert und einer Funktion zum Aktualisieren des Statuswerts.

Hier ist der Code für den useModalHook:

import { useState } from 'react';

function useModal() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalContent, setModalContent] = useState(null);

  function openModal(content) {
    setModalContent(content);
    setIsModalOpen(true);
  }

  function closeModal() {
    setModalContent(null);
    setIsModalOpen(false);
  }

  return {
    isModalOpen,
    openModal,
    closeModal,
    modalContent,
  };
}

• isModalOpen: ein boolescher Wert, der angibt, ob das Modal derzeit geöffnet ist.
• openModal: eine Funktion, die ein contentArgument entgegennimmt und den modalContentStatus darauf sowie isModalOpenauf setzt true.
• closeModal: eine Funktion, die modalContentauf setzt nullund isModalOpenauf setzt false.
• modalContent: der Inhalt des Modals.

Da wir nun den useModalHook haben, können wir ihn verwenden, um Modalitäten in unseren React-Komponenten zu erstellen und zu verwalten.

Hier ist eine Beispielkomponente, die den useModalHook verwendet:

import { useState } from 'react';
import useModal from './useModal';

function App() {
  const [data, setData] = useState(null);
  const { isModalOpen, openModal, closeModal, modalContent } = useModal();

  function handleButtonClick() {
    setData('example data');
    openModal(<Modal onClose={closeModal} data={data} />);
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Open Modal</button>
      {isModalOpen && modalContent}
    </div>
  );
}

function Modal({ onClose, data }) {
  function handleConfirm() {
    console.log('Confirmed with data:', data);
    onClose();
  }

  return (
    <div>
      <h2>Modal Content</h2>
      <p>Data: {data}</p>
      <button onClick={onClose}>Cancel</button>
      <button onClick={handleConfirm}>Confirm</button>
    </div>
  );
}

Die `Modal-Komponente erhält zwei Requisiten: onCloseund data. onCloseist eine Funktion, die aufgerufen wird, wenn der Benutzer auf die Schaltfläche „Abbrechen“ oder „Bestätigen“ klickt. datasind die Daten, die in der Funktion festgelegt wurden handleButtonClick.

Die ModalKomponente zeigt den Inhalt des modalen Fensters an, einschließlich der als Requisite übergebenen Daten. Es enthält außerdem eine Schaltfläche „Abbrechen“ und eine Schaltfläche „Bestätigen“. Wenn der Benutzer auf die Schaltfläche „Abbrechen“ klickt, onClosewird die Funktion aufgerufen, die das modale Fenster schließt. Wenn der Benutzer auf die Schaltfläche „Bestätigen“ klickt, handleConfirmwird die Funktion aufgerufen, die die Daten in der Konsole protokolliert und dann onClosezum Schließen des modalen Fensters aufruft.

Schließlich Apprendern wir in der Komponente eine Schaltfläche, die beim Klicken das Modal öffnet, und rendern das Modal bedingt, indem wir prüfen, ob es isModalOpenwahr ist, und das modalContentim DOM rendern.

Abschluss

In diesem Artikel haben wir Ihnen gezeigt, wie Sie useModalin React einen Hook erstellen, der das Erstellen und Verwalten modaler Fenster vereinfacht. Mit diesem Hook können Sie Modale einfach öffnen und schließen, Daten an sie übergeben und Benutzerinteraktionen verarbeiten.

Der useModalHaken kann an Ihre spezifischen Bedürfnisse angepasst werden. Sie können beispielsweise weitere Zustandsvariablen hinzufügen, um verschiedene Arten von Modalitäten zu verfolgen, oder zusätzliche Funktionen hinzufügen, um bestimmte Benutzerinteraktionen zu verarbeiten.

Durch die Verwendung des useModalHooks können Sie Ihren React-Code sauberer und organisierter gestalten und die Komplexität der Verwaltung von Modalitäten direkt in Ihren Komponenten vermeiden. Wir hoffen, dass dieser Artikel hilfreich war und dass Sie den useModalHook in Ihren React-Projekten nützlich finden.