在动态创建的按钮上用颜色填充活动按钮

Question

我想让一个按钮在按下时显示为活动状态，问题是我该如何处理动态创建的按钮？

目前我的设置是这样的：

      <Grid container sx={{ padding: "10px" }}>
        {Object.values(CATEGORIES).map((c) => {
          return (
            <Button className="category-btn" onClick={() => handleChange(c)}>
              {c.title}
            </Button>
          );
        })}
      </Grid>

由于按钮是动态生成的，所以我不确定如何添加功能。我目前已经尝试过这个答案。

Answer 1

如果 CATEGORIES 对象没有 ID，映射函数还会为您提供数组中的索引，您可以跟踪该索引以发现哪个按钮应该处于活动状态。

如果您只能激活一个按钮：

const [activeButtonIndex, setActiveButtonIndex] = useState(null)

const handleChange = (c,index) => {
  setActiveButtonIndex(index)
}
...
<Grid container sx={{ padding: "10px" }}>
        {Object.values(CATEGORIES).map((c,index) => {
          return (
            <Button className={index === activeButtonIndex ? "category-btn-active" : "category-btn"} onClick={() => handleChange(c,index)}>
              {c.title}
            </Button>
          );
        })}
      </Grid>

如果您可以激活多个按钮，您可以：

const [activeButtonIndexList, setActiveButtonIndexList] = useState([])

const handleChange = (c,index) => {
  setActiveButtonIndexList([...activeButtonIndexList, index])
}
...
<Grid container sx={{ padding: "10px" }}>
        {Object.values(CATEGORIES).map((c,index) => {
          return (
            <Button className={activeButtonIndexList.includes(index) ? "category-btn-active" : "category-btn"} onClick={() => handleChange(c,index)}>
              {c.title}
            </Button>
          );
        })}
      </Grid>

在动态创建的按钮上用颜色填充活动按钮

Fill active button with color on buttions that are dynamically created

typescript

reactjs

material-ui

tsx