Kalıcı pencereler, web uygulamalarında yaygın olarak kullanılan bir kullanıcı arabirimi öğesidir. Önemli bilgileri görüntülemek, kullanıcı girişi istemek veya bir eylemi onaylamak için kullanılırlar. Modal pencereler yardımcı olabilse de, özellikle sayfanızda birkaç kip varsa, bunların yönetilmesi zor olabilir.

useModalBu makalede, size React'te modal pencereler oluşturmayı ve yönetmeyi basitleştiren bir kancanın nasıl oluşturulacağını göstereceğiz . Bu kanca ile kipleri kolayca açıp kapatabilir, onlara veri iletebilir ve kullanıcı etkileşimlerini yönetebilirsiniz.

useModalKancayı Oluşturma

Kancayı oluşturmak için , kipin durumunu yönetmek için React'teki kancayı useModalkullanacağız . useStateKanca useState, iki öğeli bir dizi döndürür: geçerli durum değeri ve durum değerini güncelleme işlevi.

İşte kancanın kodu useModal:

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: kipin o anda açık olup olmadığını gösteren bir boole değeri.
• openModal: bir contentbağımsız değişken alan ve modalContentdurumu ona ayarlayan ve ayrıca isModalOpenolarak ayarlayan bir işlev true.
• closeModalmodalContent: ayarlayan nullve ayarlayan isModalOpenbir işlev false.
• modalContent: kipin içeriği.

Artık kancaya sahip olduğumuza göre useModal, onu React bileşenlerimizde kipler oluşturmak ve yönetmek için kullanabiliriz.

İşte kancayı kullanan örnek bir bileşen useModal:

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>
  );
}

`Modal bileşeni iki donanım alır: onCloseve data. onClosekullanıcı "İptal" düğmesine veya "Onayla" düğmesine tıkladığında çağrılacak bir işlevdir. datafonksiyonda ayarlanan veridir handleButtonClick.

Bileşen Modal, donanım olarak iletilen veriler de dahil olmak üzere kalıcı pencerenin içeriğini görüntüler. Aynı zamanda bir "İptal" düğmesi ve bir "Onayla" düğmesi içerir. Kullanıcı "İptal" düğmesini tıkladığında, onClosemodal pencereyi kapatacak olan işlev çağrılır. Kullanıcı "Onayla" düğmesini tıkladığında, handleConfirmverileri konsola kaydeden ve ardından onClosemod penceresini kapatmak için çağıran işlev çağrılır.

Son olarak component içerisinde Apptıklandığında modalı açan bir buton render ediyoruz ve isModalOpentrue olup olmadığını kontrol ederek ve modalContentDOM'da render ederek kipi şartlı olarak render ediyoruz.

Çözüm

useModalBu makalede, size React'te modal pencereler oluşturmayı ve yönetmeyi basitleştiren bir kancanın nasıl oluşturulacağını gösterdik . Bu kanca ile kipleri kolayca açıp kapatabilir, onlara veri iletebilir ve kullanıcı etkileşimlerini yönetebilirsiniz.

Kanca useModal, özel ihtiyaçlarınıza uyacak şekilde özelleştirilebilir. Örneğin, farklı model türlerini izlemek için daha fazla durum değişkeni ekleyebilir veya belirli kullanıcı etkileşimlerini işlemek için ek işlevler ekleyebilirsiniz.

Kancayı kullanarak useModal, React kodunuzu daha temiz ve daha düzenli hale getirebilir ve modları doğrudan bileşenlerinizde yönetmenin karmaşıklığından kaçınabilirsiniz. useModalBu makalenin yardımcı olduğunu ve kancayı React projelerinizde faydalı bulacağınızı umuyoruz .