재료 UI를 사용하여 앱바 아래에 드롭다운 메뉴를 여는 방법

재료 UI를 사용하여 앱바 아래에 드롭다운 메뉴를 여는 방법

머티리얼 UI는 처음이라 앱 바의 메뉴 예제를 만지작거리기 시작했습니다.메뉴 드롭다운을 전환하면 앱바 위에 열리는데, 네비게이션 바 아래쪽에 열었으면 합니다.

의사로부터 위치 변경은 다음과 같이 할 수 있다는 것을 알았습니다.anchorElPopover 포지셔닝 가이드에 설명되어 있습니다.하지만 이 기능을 구현하면menu컴포넌트는 아무 일도 일어나지 않습니다.이 문제를 해결하기 위한 "올바른 머티리얼 UI 방식"은 무엇입니까?

class Header extends React.Component {
  state = {
    auth: true,
    anchorEl: null,
    anchorOriginVertical: 'bottom',
    anchorOriginHorizontal: 'right',
    transformOriginVertical: 'top',
    transformOriginHorizontal: 'right',
    anchorReference: 'anchorEl',
  };

  handleChange = (event, checked) => {
    this.setState({ auth: checked });
  };

  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { classes } = this.props;
    const { auth, anchorEl } = this.state;
    const open = Boolean(anchorEl);

    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <Typography type="title" color="inherit" className={classes.flex}>
              Title
            </Typography>
            {auth && (
              <div>
                <IconButton
                  aria-owns={open ? 'menu-appbar' : null}
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                  color="contrast"
                >
                  <AccountCircle />
                </IconButton>
                <Menu
                  id="menu-appbar"
                  anchorEl={anchorEl}
                  open={open}
                  onClose={this.handleClose}
                >
                  <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                  <MenuItem onClick={this.handleClose}>My account</MenuItem>
                </Menu>
              </div>
            )}
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

이렇게 메뉴 자체에 소품을 세팅하면 작동하게 됩니다.

  <Menu
    id="menu-appbar"
    anchorEl={anchorEl}
    getContentAnchorEl={null}
    anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
    transformOrigin={{ vertical: 'top', horizontal: 'center' }}
    open={open}
    onClose={this.handleClose}
    className={props.classes.menu}
  >

위치 설정 소품(anchorOrigin,transformOrigin)는 Popover 컴포넌트에서 가져옵니다.데모를 참조해 주세요.https://mui.com/material-ui/react-popover/ # playground playground

나도 넣어야 했어.getContentAnchorEl={null}세로형 소품을 사용할 수 있도록 하기 위해서입니다.결국 이번 호에서 알게 되었습니다.https://github.com/mui/material-ui/issues/7961
편집:getContentAnchorEl머티리얼 UI v5에서 소품이 제거되어 더 이상 필요하지 않습니다.

상태를 사용하여 앵커 요소의 속성을 설정할 때 이 작업을 수행하는 방법을 잘 모르겠습니다. 그러나 이 작업을 통해 시작할 수 있습니다.

이건 내 해결책이었어. 이게 누군가에게 도움이 되길 바라.

<Menu
  open={this.state.openProps}
  anchorEl={this.state.anchorEl}
  onClose={onClose}
  className={classes.styles}
  disableAutoFocusItem
  PaperProps={{
    style: {
      left: '50%',
      transform: 'translateX(-77%) translateY(32%)',
    }
  }}
  MenuListProps={{
    style: {
      padding: 0,
    },
  }}
>

Matheus 응답에 오류가 있습니다.anchorEl의 유형은 부울이 아닙니다.ReactHooks에서는 다음과 같아야 합니다.

  const [menuOpen, setMenuOpen] = useState<boolean>(false);
  const [anchorEl, setAnchorEl] = useState()

  const recordButtonPosition = (event: any) => {
      setAnchorEl(event.currentTarget);
      setMenuOpen(true);
  }

  let closeMenu = () => {
      setMenuOpen(false);
  }

  return (
      <React.Fragment>
          <Button onClick={recordButtonPosition}>
              OPEN MENU
          </Button>
          <Menu
              anchorEl={anchorEl}
              open={menuOpen}
              onClose={closeMenu}>
              <MenuItem onClick={closeMenu}> ExampleMenuItem </MenuItem> 
          </Menu>
      </React.Fragment>
  );

나는 처음에 클릭을 한 후 점프 효과의 문제가 있었다.나는 만들어야 했다.keepMounted={false}

x와 y의 값은 조정해서 얻을 수 있습니다.translateX(10px) translateY(50px)dev Tool에서.

                      <div>
                         <Menu
                                    id="simple-menu"
                                    anchorEl={anchorEl}
                                    keepMounted={false}
                                    open={Boolean(anchorEl)}
                                    onClose={this.handleClose}
                                    PaperProps={{
                                        style: {
                                            transform: 'translateX(10px) translateY(50px)',
                                        }
                                    }}
                                >
                                    <MenuItem onClick={this.handleClose}>My Account</MenuItem>
                                    <Divider variant="middle"/>
                                    <MenuItem onClick={this.handleClose}>Logout</MenuItem>
                                </Menu>
                            </div>

앵커를 정의하지 않았기 때문입니다.

Menu 속성 anchorEl은 호출한 버튼의 위치를 전달하는 역할을 합니다.이러한 내용은 참이 아니지만 이해하기 쉬운 내용입니다.

이렇게 하면 클릭이 있을 때마다 참조할 수 있습니다.부품을 깨끗하게 하는 리액션 훅을 사용하는 것이 좋습니다.

리액트 스테이트풀

const [menuOpen, setMenuOpen] = useState(false)
const [anchorEl, setAnchorEl] = useState(false)

const handleClick = (event) => {
const anchorEl = event.currentTarget
this.setState({ ...this.state, menuOpen: !menuOpen , anchorEl })

리액트 훅

const [menuOpen, setMenuOpen] = useState(false)
const [anchorEl, setAnchorEl] = useState(false)

const handleClick = (event) => {
setAnchorEl(event.currentTarget)
}

표현하다

return (
 <Menu
   anchorEl={anchorEl}
   open={menuOpen}
   onClose={handleClick }              
 </Menu 
)

useRef 훅을 사용하면 쉽게 실현할 수 있습니다.

1. 참조를 작성
2. Div 또는 다른 경우에 메뉴를 표시하려면 ref를 삽입하십시오.
3. 메뉴의 앵커 소품 안에 레퍼런스를 삽입하다

여기에 코드를 입력합니다.

const inputEl = useRef(null);
<Mycomponent ref={inputEl}/>
<Menu
  id="simple-menu"
  anchorEl={inputEl.current}
  keepMounted
  open={Boolean(anchorEl)}
  onClose={handleClose}
>

내게는 이것이 훨씬 더 쉬운 방법이다

New Material-ui 버전 5에서는 왜 이런 이상한 일이 일어나는지 이해할 수 없습니다.하지만 앱바에 별도의 메뉴 컴포넌트를 작성하면 동작합니다.

import * as React from 'react';
import { useRouter } from 'next/router'
import { Menu, IconButton, } from '@mui/material';
import MenuItem from '@mui/material/MenuItem';
import AccountCircle from '@mui/icons-material/AccountCircle';

export default function AppBarMenu() {
    const router = useRouter()
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    const handleLogout = () => {
        localStorage.clear()
        router.push('/auth/login')
    }
    return (
        <>
            <IconButton
                id="basic-button"
                size="large"
                aria-controls="basic-menu"
                aria-haspopup="true"
                aria-expanded={open ? 'true' : undefined}
                onClick={handleClick}
            >
                <AccountCircle sx={{ color: 'white' }} />
            </IconButton>
            <Menu
                id="basic-menu"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                MenuListProps={{
                    'aria-labelledby': 'basic-button',
                }}
            >
                <MenuItem onClick={handleClose}>Profile</MenuItem>
                <MenuItem onClick={handleClose}>My account</MenuItem>
                <MenuItem onClick={handleLogout}>Logout</MenuItem>
            </Menu>
        </>
    );
}

그 모든 것들이 나한테는 통하지 않았어.그래서 버튼에 id를 주고 javascript를 사용하여 메뉴에 올렸습니다.

<IconButton id="btnPerfil" onClick={this.toggleMenuPerfilOpen}>
    <AccountCircle color="inherit" />
</IconButton>
<Menu
  anchorPosition={{
    vertical: 'top',
    horizontal: 'center'
  }}
  anchorEl={document.getElementById('btnPerfil')}
  keepMounted
  open={this.state.isMenuPerfilOpen}
  onClose={this.toggleMenuPerfilOpen}
>...</Menu>

언급URL : https://stackoverflow.com/questions/48157863/how-to-make-a-dropdown-menu-open-below-the-appbar-using-material-ui