MUI菜单与动态内容

huangapple go评论65阅读模式
英文:

MUI Menu with dynamic content

问题

我试图拥有一个不同的菜单,显示我应用程序中每个人的名字,但所有菜单中的名字都相同。所有按钮也具有不同的用户名称(这部分有效),但菜单内部没有。以下是我正在做的简单示例:

const MyComponent = () => {
  const users = [
    {name: "John"},
    {name: "Marc"},
    {name: "Joe"}
  ];

  const open = Boolean(anchorEl);

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

  const handleClose = () => {
    setAnchorEl(null);
  };

  return(
    <>
      {users.map((user) => (
        <Button
          onClick={handleClick}
          aria-controls={open ? 'account-menu' : undefined}
          aria-haspopup="true"
          aria-expanded={open ? 'true' : undefined}
        >
          {user.name} 菜单
        </Button>

        <Menu
          anchorEl={anchorEl}
          id="account-menu"
          open={open}
          onClose={handleClose}
          onClick={handleClose}
        >
          <MenuItem>
            {user.name}
          </MenuItem>
        </Menu>
      ))}
    </>
  )
}

最终每个菜单都显示“John”,而不是每个都有不同的名字。

英文:

I'm trying to have a different menu that are showing the names of each person I'm displaying in my app, but the name is the same inside all the menus.
All the buttons also have the different users names (this works) but not on the inside
Here is a simple examples of what I'm doing:

const MyComponent = () =&gt; {
  const user = [
    {name: &quot;John&quot;},
    {name: &quot;Marc&quot;},
    {name: &quot;Joe&quot;}
  ];

  const open = Boolean(anchorEl);

  const handleClick = (event) =&gt; {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () =&gt; {
    setAnchorEl(null);
  };

  return(
    &lt;&gt;
      {users.map((user) =&gt; (
        &lt;Button
          onClick={handleClick}
          aria-controls={open ? &#39;account-menu&#39; : undefined}
          aria-haspopup=&quot;true&quot;
          aria-expanded={open ? &#39;true&#39; : undefined}
        &gt;
          {user.name} menu
        &lt;/Button&gt;

        &lt;Menu
          anchorEl={anchorEl}
          id=&quot;account-menu&quot;
          open={open}
          onClose={handleClose}
          onClick={handleClose}
        &gt;
          &lt;MenuItem&gt;
            {user.name}
          &lt;/MenuItem&gt;
        &lt;/Menu&gt;
      ))}
    &lt;/&gt;
  )
}

I end up having for each menus "John" instead of each one having the differents names..

答案1

得分: 1

这可能是因为所有Menu组件都由单个anchorEl状态控制,并且在打开时堆叠在一起。

看起来目标是让每个Button托管自己的Menu。如果是这种情况,考虑构建ButtonMenu作为一个单独的组件,例如MyUserButton,以便每个组件都可以管理自己的anchorEl状态而不会冲突。

在此处进行了演示测试:stackblitz

MyUserButton组件的示例:

const MyUserButton = ({ user }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

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

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <>
      <Button
        onClick={handleClick}
        aria-controls={open ? 'account-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
      >
        {user.name} menu
      </Button>
      <Menu
        anchorEl={anchorEl}
        id="account-menu"
        open={open}
        onClose={handleClose}
        onClick={handleClose}
      >
        <MenuItem>{user.name}</MenuItem>
      </Menu>
    </>
  );
};

主要的MyComponent可以简化为:

const users = [{ name: 'John' }, { name: 'Marc' }, { name: 'Joe' }];

const MyComponent = () => {
  return (
    <>
      {users.map((user) => (
        <MyUserButton key={user.name} user={user} />
      ))}
    </>
  );
};
英文:

This could be because all Menu component are controlled by a single anchorEl state and are stacked together when open.

It looks like the goal is to have each Button host its own Menu. If this is the case, consider to build the Button and Menu as a separate component such as MyUserButton, so that each could manage its own anchorEl state without conflicts.

Tested in demo here: stackblitz

Example for the MyUserButton component:

const MyUserButton = ({ user }) =&gt; {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) =&gt; {
setAnchorEl(event.currentTarget);
};
const handleClose = () =&gt; {
setAnchorEl(null);
};
return (
&lt;&gt;
&lt;Button
onClick={handleClick}
aria-controls={open ? &#39;account-menu&#39; : undefined}
aria-haspopup=&quot;true&quot;
aria-expanded={open ? &#39;true&#39; : undefined}
&gt;
{user.name} menu
&lt;/Button&gt;
&lt;Menu
anchorEl={anchorEl}
id=&quot;account-menu&quot;
open={open}
onClose={handleClose}
onClick={handleClose}
&gt;
&lt;MenuItem&gt;{user.name}&lt;/MenuItem&gt;
&lt;/Menu&gt;
&lt;/&gt;
);
};

The main MyComponent can be simplified as:

const users = [{ name: &#39;John&#39; }, { name: &#39;Marc&#39; }, { name: &#39;Joe&#39; }];
const MyComponent = () =&gt; {
return (
&lt;&gt;
{users.map((user) =&gt; (
&lt;MyUserButton key={user.name} user={user} /&gt;
))}
&lt;/&gt;
);
};

huangapple
  • 本文由 发表于 2023年2月24日 08:13:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75551547.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定