如何向切换按钮添加唯一 ID 以阻止所有按钮被选中？

Question

代码很长，所以我编辑了它。 在这段代码中，我得到了多个按钮，当我点击其中一个按钮时，它完美地运行了该按钮的功能，但是当我点击“ToggleButton”时，所有按钮都被选中，如下所示：

 const [alignment, setAlignment] = React.useState('web');
 
 const handleChangesize = (event, newAlignment) => {
 setAlignment(newAlignment);
   };



            myj.map((item) => {
              return (
                <Grid item key={item.itemId}>
                          <ToggleButtonGroup
                            color="primary"
                            value={alignment}
                            exclusive
                            onChange={handleChangesize}
                            aria-label="Platform"
                          >
                            <ToggleButton value="web">Web</ToggleButton>
                            <ToggleButton value="android">Android</ToggleButton>
                            <ToggleButton value="ios">iOS</ToggleButton>
                          </ToggleButtonGroup>
                    
                   
                      <CardActions>
                          <Button
                            value={item.something}
                            onClick={(e) => {
                              addToCard(item);
                            }}
                          >
                            add to cart
                          </Button>
                        )}
                      </CardActions>
                </Grid>
              );
            })

所以我可以让

add to cart

按钮在不相互干扰的情况下工作；我怎样才能在我的 ToggleButton 中实现它？

我想如果有办法给切换按钮或切换按钮组添加一个唯一的id，问题就会解决