Reactda state istifadə edərək Modal yaradacağıq.
İlk olaraq hamının bildiyi kimi reactı lokal komputerimizə qurmalıyıq və ya mənim kimi codesandbox.io kimi online IDE istifadə edə bilərsiniz.
1.
Localda işləmək istəyirsinizsə npx create-react-app react-modal yazaraq iş yerimizi hazırlaya bilərsiniz.
Code Sandbox istifadə edirsinizsə. React templatesini seçəbilərsiniz
2.
Folder sturucturunu quraq.
Kod təmiz olsun deyə src qovluğunda components onun içərisində isə modal qovluğu yaradırıq. Modal qovluğunda modal.css və modal.jsx fayllarını yaradaq.
3. İlk olaraq Modal.jsx faylı üzərində işləyəcəyik. Yaratdığımız komponent funksional komponent olacaq ama siz istəyirsinizsə class componentdə yarada bilərsiniz.
import React from "react"function Modal(){
return(
<div>Bu bir modaldir</div>
)}
export default Modal;
4. Export etdiyimiz modalı app.js faylına daxil edək və işləyib işləmədiyinə baxaq.
import Modal from “./componets/Modal/Modal” istifadə edərək Modalı App.js faylına import edirik.
Modalın app jsda göründüyünü gördük artıq üzərində işləməyə başlayaq.
Modal elementinə dizayn vermək üçün aşağıdakı css və html kodlarını daxil etdim. Siz istədiyiniz şəkildə dizayn edə bilərsiniz.
Modalımızın görünüşü aşağıdakı şəkildədir.
İndi isə modalımıza funksionallıqları əlavə edək.
- İlk olaraq App.js faylına bir düymə əlavə edək və həmin düyməyə basdıqda modalımızı göstərməsi üçün funksiya yazaq.
Bu funksionallığı yaratmaq üçün useState və conditional rendering istifadə edəcəyik.
Birinci useStatemizi javascriptdəki destructing üsulu ilə ayıraq.
const [modal,setModal] = useState(false)
Və ona dəyər olaraq false təyin edək.
Daha sonra App.js da yaratdığımız buttona onClick eventi təyin edək və bu onClick eventində modalı göstərəcək funksiya təyin edək. Bu funksiyanın adı showModal olsun.
<button onClick={showModal}>Modali goster</button>
showModal funksiyası aşağıdakı kimi olacaq
function showModal() {
setModal(!modal)
}Bu o deməkdirki hər buttona klik olduqda modal elementinin dəyəri falsedən trueyə dəyişsin daha sora isa conditional rendering əlavə edərək bu funksiyanın işləməsini təmin edək.
{modal ? <Modal /> :null}
bu o deməkdirki useStatedəki modal truedirsə Modal komponenti render olacaq.
Artıq düyməyə basdıqda bizim modalımız açılır. İndi isə qaldı modal üzərindəki close düyməsi ilə onu bağlamaq.
Bunu etmək üçün ilk olaraq Modal componentinə property təyin edirik yəni props.
Sonra close Modalına onClick təyin edirik və deyirikki bu onClick funksiyası prop vasitəsi ilə ötürülən funksiya ilə işləyəcək. Yəni
<button onClick={props.closeModal} className=’btn’>Close</button>
App.js faylında isə closeModal propertisinə yeni bir funksiya yaradıb ötürürük.
Bu funksiyanın adını close qoyuruq
<Modal closeModal={close} />
close funksiyası isə bu şəkildədir.
function close() {setModal(!modal);}
Və bitti modalımız hazırdır.
