React komponens aktíválása

React komponens aktíválása
2022-01-21T14:02:58+01:00
2022-01-30T22:25:22+01:00
2022-10-15T21:20:39+02:00
Tipti
Sziasztok,

van egy komponensem: Simplemenu - lásd mellékelt kód.
Két tag-je van: egy <Button> és egy <Menu>. Ha megjelenik, a Button lenyomására lezajlik az onClick esemény és a handleClick megjeleníti a Menu tartalmát.
Azt szeretném, hogy a Button megnyomása nélkül lefusson ez a folyamat.
Lenne valakinek ötlete, hogy oldható ez meg?
Az alkalmazásom majd egy web szerverre szeretném feltölteni. Működni fog majd így is?

Köszi: Tipti


import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";


function SimpleMenu() {
    const [anchorEl, setAnchorEl] = React.useState(null);


    function handleClick(event) {
        if (anchorEl !== event.currentTarget) {
            setAnchorEl(event.currentTarget);
        }
    }


    function handleClose() {
        setAnchorEl(null);
    }


    return (
        <div>
            <Button
                id='btn'
                aria-owns={anchorEl ? "simple-menu" : undefined}
                aria-haspopup="true"
                onClick={handleClick}
                onMouseOver={handleClick}
            >
                Open Menu
            </Button>
            <Menu
                id="simple-menu"
                anchorEl={anchorEl}
                open={Boolean(anchorEl)}
                onClose={handleClose}
                MenuListProps={{ onMouseLeave: handleClose }}
            >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleClose}>Logout</MenuItem>
            </Menu>
        </div>
    );
}

export default SimpleMenu;
Mutasd a teljes hozzászólást!
Elég kacifántos UX, de ám legyen:

Gondolom rájöttél hogy ahhoz hogy a menüd nyitva legyen elég az open prop-ját true-ra állítani, viszont így a menü nem a gombon, hanem a bal felső sarokban nyílik meg.

Magát az anchorEl-t beállíthatod useEffect-el, a komponens mountolódásakor.
Az értékéhez viszont szükséged lesz a gomb egy referenciájára, amit useRef-el meg is kaphatsz.

Nem kopizom be az egészet, ITT megnézheted.
Mutasd a teljes hozzászólást!

  • Azt szeretném, hogy a Button megnyomása nélkül lefusson ez a folyamat.

    Lefut ez hoverre is hiszen szépen bekötötted az onMouseOver-t, szóval nem igazán értem mit is szeretnél megvalósítani.
    Mutasd a teljes hozzászólást!
  • Szia Radikatkat,

    amint megjelenik a komponensem <Button> - OPEN MENU a képernyőn, azt szeretném, hogy a <Menu> rögtön esemény, egérkattintás nélkül kibontva jelenjen meg. Tehát le szeretném valahogy futtatni a <Button>-ra kötött eseményt a <Button>-ra kattintás nélkül.

    Köszi: Tipti
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Elég kacifántos UX, de ám legyen:

    Gondolom rájöttél hogy ahhoz hogy a menüd nyitva legyen elég az open prop-ját true-ra állítani, viszont így a menü nem a gombon, hanem a bal felső sarokban nyílik meg.

    Magát az anchorEl-t beállíthatod useEffect-el, a komponens mountolódásakor.
    Az értékéhez viszont szükséged lesz a gomb egy referenciájára, amit useRef-el meg is kaphatsz.

    Nem kopizom be az egészet, ITT megnézheted.
    Mutasd a teljes hozzászólást!
  • KÖSZÖNÖM !
    Mutasd a teljes hozzászólást!
  • Szia Radikatkat,

    köszönöm a segítséged Közben ismerkedtem a CodeSandbox-szal is

    Próbáltam továbbhaladni és szeretnék még segítséged kérni Tőled, ha ez lehetséges.
    Ameddig eljutottam: MenuBom - CodeSandbox

    ? nem tudom beállítani a megjelenítést minden Button-click-re
    Button click-re kapcsolgatható a StyledMenuItem ikonjainak megjelenítése. Gondoltam, ha egy useEffect-tel [withIcon] figyelem a kapcsolóváltásokat, akkor az általad javasolt useEffect -tel [setAchorEl] minden handleClick() olyan hatású lesz, mint a MenuBom komponens megjelenítése.

    ? a menü nyitva és ha a Content komponensre kattintok, a menü bezáródik. Lehetséges ezt az állapotot vezérelni, hogy a menü ne záródjon be?

    Köszi: Tipti
    Kezdőként ez a doksi nagyon tömény nekem: Button API - MUI Te hol tanultad meg ezeket a komponenseket ilyen jól kezelni? Hol érhetnék el erről bővebb információt?
    Mutasd a teljes hozzászólást!
  • Hello,

    - Az anchorEl-t elég egyszer elmenteni state-be, utána nem kell hozzányúlni.
    - Ha folyamatosan nyitva akarod tartani a menüd, egyszerűen küld be props-ba hogy open={true}

    Node, elmondom hogy ez miért nem fog működni:
    A Menu-t úgy képzeld el mint egy modal-t, nem fogsz tudni mögé kattintani addig amíg aktívan nyitva van. (nálad ez azért működik mert közben állítgatod az anchorEl-t, amivel implicit becsukod)

    A Menu komponens egyszerűen nem arra való amire használni szeretnéd.

    Ha oldalnavigációt szeretnél összerakni akkor simán pakold ki az elemeket oldalra egy Listába, vagy megnézheted a Drawer-t, ha nyitogatni szeretnéd.

    ------------

    Hát, pedig a MUI saját doksijánál jobbat keresve sem találsz. Én első körben végigfutnék rajta hogy milyen fő komponensei is vannak és azok mire valók.

    Ha esetleg valamivel emészthetőbbet keresel, akkor azt tudom ajánlani hogy youtube.com -> "react material ui". Rengeteg videóanyagot találsz róla. (Például)
    Mutasd a teljes hozzászólást!
  • Szia,

    KÖSZÖNÖM ezekben most csendben és hosszasan elmélyülök
    Elsőre azt hiszem e kettő ötvözete (Drawer + NestedList) kell nekem.

    Üdv: Tipti
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd