对不起,我不知道为什么这个代码的缩进是如此关闭。我想显示一个芯片每次一个菜单项被点击,但与此当前的代码,它是显示一个芯片与所有的类别集中在一起(即“类别1类别2类别3”而不是“类别1”。我如何才能设置这一点,使当类别1被点击时,只有“类别1”芯片显示,而当点击类别2时,只会显示“类别2”芯片。谢谢。
const categories = [
'Category 1',
'Category 2',
'Category 3',
];
export default function Test() {
const [selectedCategory, setSelectedCategory] = React.useState(null);
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const [expanded, setExpanded] = React.useState(false)
const handleExpandClick = () => setExpanded(!expanded)
const [showChip, setShowChip] = useState(false);
const handleCategoryClick = () => {
setShowChip(true);
setSelectedCategory(categories);
setAnchorEl(null);
};
return (
<Button
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
>
Categories
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
{categories.map((categories) => (
<MenuItem
key={categories}
value={categories}
onClick={handleClick}
>
{categories}
</MenuItem>
))}
{selectedCategory && <Chip key={selectedCategory} label={selectedCategory} />}
</Menu>
);
1条答案
按热度按时间bvjxkvbb1#
不确定我是否完全理解所需的结果,因为张贴的代码似乎是部分的,但如果目标是:
当点击类别1时,仅显示“类别1”芯片,而当点击类别2时,仅显示“类别2”芯片
也许可以尝试让
MenuItem
将所需的值传递给处理程序handleCategoryClick
:在
handleCategoryClick
中,接收并设置点击值的相关状态:因为
Chip
已经有条件地显示并且已经将label
与状态连接起来,所以当状态selectedCategory
更新时,它应该显示正确的值。