英文:
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} />
))}
</>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论