Question

我是新来的反应者，因此我只停留在一件事情上，那就是，我在按钮中插入了删除图标，并且在前端侧有多个按钮，我希望当任何可见按钮都单击时，只有该特定按钮可以删除或消失，并且其余未触动的按钮仍可以在前端页面上看到。

有线索吗？

这是示例代码：https://codesandbox.io/s/reactjs-simple-conditional-rendering-example-gocg0

谢谢

Answer 1

您不能使用单个bool存储多个按钮的打开状态。

您可以使用列表来存储显示的按钮：

const [openButtons, setOpenButtons] = React.useState([
  "Computer Science",
  "Business Adminstration",
  "Business Adminstration",
  "Media Studies",
  "Human Resources",
  "Udemy"
]);

更改handleClose函数以从列表中过滤出删除的项目：

function handleClose(buttonName) {
  setOpenButtons(
    openButtons.filter(openButtonName => openButtonName !== buttonName)
  );
}

并显示已存储列表中的按钮：

{openButtons.includes("Computer Science") && (
  <Button
    variant="contained"
    color="primary"
    className={classes.button}
    onClick={() => handleClose("Computer Science")}
  >
    Computer Science
    <DeleteIcon className={classes.rightIcon} />
  </Button>
)}

这里是codesandbox example。

材质UI按钮中的图标

1 个答案: