在我点击菜单中的内容后需要更新芯片内容

Question

• 我正在尝试实现类似于谷歌航班的芯片功能。
• 现在，当我单击芯片时，菜单正在打开。这里的运动是筹码
• 但是当我点击个人资料时，芯片中的运动文本应该更新为带有十字图标的个人资料文本。
• 我尝试通过传递事件，但在控制台中没有得到点击的 li。
• 你能告诉我如何解决它吗？
• 在下面提供我的代码

我的代码

https://codesandbox.io/s/40mmrl9059

例子

https://www.google.fr/flights#flt=AUS./m/02_286.2018-11-16/m/02_286.AUS.2018-11-20;c:USD;e:1;a:STAR_ALLIANCESTAR_ALLIANCE;sd:1;t:f

<WithState>
              {({ anchorEl, updateAnchorEl }) => {
                const open = Boolean(anchorEl);
                const handleClose = e => {
                  console.log("handleClose --->", e);
                  updateAnchorEl(null);
                };

                return (
                  <React.Fragment>
                    <Chip
                      onClick={event => {
                        console.log(
                          "event.currentTarget--->",
                          event.currentTarget
                        );
                        updateAnchorEl(event.currentTarget);
                      }}
                      label="Sports"
                      className={classes.chip}
                    />

                    <Chip
                      label="Sports Staus Active"
                      onDelete={handleDelete}
                      className={classes.chip}
                      color="primary"
                    />

Answer 1

我已经更新了沙盒。试试this。