Material-UI Компонент меню запускается только последнее действие MenuItem onClick - PullRequest
Новая
       12

Material-UI Компонент меню запускается только последнее действие MenuItem onClick

0 голосов
/ 21 сентября 2019

Недавно я попытался реализовать простое выпадающее меню с использованием компонентов MenuUI (4.3.3) MaterialUI (4.3.3).

Событие onclick в MenuItem не работает правильно.Когда вызывается console.log(id), каждый компонент выводит последний элемент из образца массива.Я переключился на ListItem, проблема исчезла. 


const Test = () => {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const sampleArray = ["test1", "test2", "test3"];
    const open = Boolean(anchorEl);

    return (
        sampleArray.map(id => {
            let curID = id;
            return (<>
                <IconButton
                    aria-label="more"
                    aria-controls="long-menu"
                    aria-haspopup="true"
                    onClick={event => setAnchorEl(event.currentTarget)}
                >
                    <MoreHorizIcon />
                </IconButton>
                <Menu
                    elevation={0}
                    id="long-menu"
                    anchorEl={anchorEl}
                    keepMounted
                    open={open}
                    transformOrigin={{
                        vertical: 'top',
                        horizontal: 'center',
                    }}
                    onClose={() => setAnchorEl(null)}
                >
                    <MenuItem onClick={() => {
                        setAnchorEl(null);
                        console.log(curID); // should be each individual id, but here always "test3"
                    }}>Test</MenuItem>
                </Menu>
            </>);
        })
    )
}

Это желаемое поведение для меню?Как это решить?

1 Ответ

0 голосов
/ 21 сентября 2019

Да, это желаемое поведение.Это немного сбивает с толку:У вас есть одно состояние (anchorEl), которое решает, что является якорем для всех меню.Когда вы нажимаете на IconButton, вы устанавливаете один и тот же AnchorEl для всех меню.Поэтому, когда вы открываете меню, вы фактически открываете все 3 меню в одном месте!Причина, по которой вы всегда получаете «test3» в консоли, заключается в том, что меню с идентификатором test3 отображается последним, и он перекрывает другие меню.

Чтобы исправить это, вам нужно, чтобы каждое меню управляло своим собственным состоянием, поэтому у каждого меню будет свой якорь: 

const IsolatedMenu = props => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);

  return(
  <React.Fragment>
    <IconButton
    aria-label="more"
    aria-controls="long-menu"
    aria-haspopup="true"
    onClick={event => setAnchorEl(event.currentTarget)}
    >
    <PriorityHighIcon />
    </IconButton>
    <Menu
    elevation={0}
    id="long-menu"
    anchorEl={anchorEl}
    keepMounted
    open={open}
    transformOrigin={{
        vertical: 'top',
        horizontal: 'center',
    }}
    onClose={() => setAnchorEl(null)}
    >
    <MenuItem onClick={() => {
        setAnchorEl(null);
        console.log('curr id',props.id); // should be each individual id, but here always "test3"
    }}>Test</MenuItem>
    </Menu>

  </React.Fragment>
  )
}

И чем должен выглядеть ваш тестовый компонент: 

const Test = () => {
  const sampleArray = ["test1", "test2", "test3"];

  return (
      sampleArray.map(id => {
          return (<>
            <IsolatedMenu  id={id}/>
          </>);
      })
  )
}

Edit Invisible Backdrop

...