英文:
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 = () => {
const user = [
{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} menu
</Button>
<Menu
anchorEl={anchorEl}
id="account-menu"
open={open}
onClose={handleClose}
onClick={handleClose}
>
<MenuItem>
{user.name}
</MenuItem>
</Menu>
))}
</>
)
}
I end up having for each menus "John" instead of each one having the differents names..
答案1
得分: 1
这可能是因为所有Menu
组件都由单个anchorEl
状态控制,并且在打开时堆叠在一起。
看起来目标是让每个Button
托管自己的Menu
。如果是这种情况,考虑构建Button
和Menu
作为一个单独的组件,例如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 }) => {
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>
</>
);
};
The main MyComponent
can be simplified as:
const users = [{ name: 'John' }, { name: 'Marc' }, { name: 'Joe' }];
const MyComponent = () => {
return (
<>
{users.map((user) => (
<MyUserButton key={user.name} user={user} />
))}
</>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论