Reagovat:Použití Modalu ve funkčních komponentách

Právě teď je modal mou novou posedlostí, protože přidává styl bez námahy!

V tomto příkladu je vytvořen modal pro zobrazení seznamu mých oblíbených anime!

Nejprve se vytvoří jednoduchá funkční komponenta, která vrací tlačítko, jak je znázorněno níže:

import React from 'react';

function ModalInFunctionalComponent (){

    return(
        <>
           <button>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent

useState je třeba importovat pro nastavení booleovských hodnot pro modální otevírání a zavírání. Zpočátku modalIsOpen je nastaven na false .

Takže onClick atribut je nastaven na tlačítko pro otevření modální a po stisknutí setModalIsOpenToTrue funkce je volána pro nastavení modalIsOpentrue .

import React, {useState} from 'react';

function ModalInFunctionalComponent (){

    const [modalIsOpen, setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    return(
        <>
           <button onClick={setModalIsOpenToTrue}>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent

Dále, chcete-li použít modální, nainstalujte modal:npm install react-modal a poté importujte modal do vaší komponenty:import Modal from react-modal .
Modální komponenta je vrácena ve funkční komponentě, která má isOpen atribut. Do modální komponenty je také přidáno další tlačítko, které volá setModalIsOpenToFalse zavřete modal.

Nakonec jsem vytvořil další komponentu, která vrací seznam mých oblíbených anime a je importována a vrácena uvnitř modální komponenty!

import React from 'react'

function AnimeList () {

        return (
            <>
            <ul>
                 <h1>One Piece</h1>
                 <h1>Fullmetal Alchemist: Brotherhood</h1>
                 <h1>Naruto</h1>
                 <h1>Bleach</h1>
                 <h1>Haikyu!!</h1>
                 <h1>Kuroko no Basketball</h1>
                 <h1>My hero academia</h1>
                 <h1>One punch man</h1>   
            </ul>     
            </>
        )

}

export default AnimeList
import React, {useState} from 'react';
import Modal from 'react-modal';
import AnimeList from './Anime';


function ModalInFunctionalComponent (){

    const [modalIsOpen,setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    const setModalIsOpenToFalse =()=>{
        setModalIsOpen(false)
    }

    return(
        <>
            <button onClick={setModalIsOpenToTrue}>Click to Open Modal</button>

            <Modal isOpen={modalIsOpen}>
                <button onClick={setModalIsOpenToFalse}>x</button>
                <AnimeList/>
            </Modal>
        </>
    )
}
export default ModalInFunctionalComponent;

A je to! Váš modal by měl fungovat!

A teď trochu stylingu:

const customStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)',
      backgroundColor       : '#F0AA89'      
    }
};

Modální komponenta má style atribut s hodnotou customStyles . Můžete také přidat onRequestClose nastavte atribut modalIsOpen na false . Tím se modální zavře, když uživatel klikne kamkoli mimo modální komponentu, nejen na tlačítko 'x'.

 <Modal isOpen={modalIsOpen} style={customStyles} onRequestClose={()=> setModalIsOpen(false)}>
       <button onClick={setModalIsOpenToFalse}>x</button>
       <AnimeList/>
 </Modal>

Děkuji, že jste to dotáhli až do konce :)