javascript - Kako MUI kontrolira klik izvan komponente, da bi se sama komponenta zatvorila?


Učim dizajn komponenti MUI 5. Može li mi netko reći gdje se nalazi logika koja kontrolira klikanje izvan komponente, tako da se sama komponenta zatvori?

Nisam ga mogao pronaći u izvornom kodu.

Primijenjeno je na select komponentu i dialog komponentu.

Odgovor #1

Postoji komponenta nazvana ClickAwayListener dostupna za rukovanje klikom izvan elementa, potrebno je omotati vašu select ili dialog komponentu u nju.

Samo trebate proslijediti funkciju svojstvu nazvanom onClickAway komponenti ClickAwayListener kako biste obradili slučaj kada se klikne izvan komponente.

evo primjera demonstracije iz službene dokumentacije MUI-ja.

Odgovor #2

Komponenta Menu ima onClose povratni poziv koji se pokreće kada kliknete izvan nje. Iskoristite ga za promjenu otvorenog stanja vašeg izbornika.

    <Menu
      onClose={handleClose} // here
      anchorEl={anchorEl}
      open={open}
    />