Reactjs 删除react js物料界面中的芯片

我曾与react js和Material ui芯片合作 我添加了许多芯片，然后一个芯片显示了文本。我想拥有删除芯片的功能。但是我不知道如何删除它

如何使用

onDelete={}

删除它

这只是我代码的一部分：

import React，{useffect，useState，Component}来自“React”
从“@material ui/core/Chip”导入芯片
const useStyles=makeStyles（主题=>({
根目录：{
显示：“flex”
},
芯片：{
背景颜色：“#104d56”
},
}))
常量handleDelete=（）=>{
log（hashtag）；
};
const studentlist=[]
功能响应抽屉（道具）{
{
namefamily.map（（项目，索引）=>{
如果（索引+1>namefamily.length-gpcapacity）{
如果（showstu==项目[2]）{
学生名单(
)
}否则
学生名单(
)
}
})
}
}

根据我的理解，

handleDelete（）

函数的内部是什么？

namefamily

是一个数组数组，即

[['a'、'b'、'c']、['x'、'y'、'z']

您想使用

if（index+1>namefmily.length-gpcapacity）{

条件跳过一些学生芯片

允许使用

showstu==项[2]

条件删除

showstu学生的芯片

回答：你的

ResponsiveDrawer

看起来像 有关更多详细信息，请参阅我在代码中的注释

const ResponsiveDrawer = () => {
//considering you are getting showstu and gpcapacity as props or from somewhere

  const classes = useStyles();
  // point 2. you can skip here instead of checking if everytime
  const [chipData, setChipData] = React.useState(
     namefamily.slice(0, ((namefamily.length - 2) - gpcapacity))
   );

  const handleDelete = (chipToDelete) => {
    setChipData((chips) => chips.filter((chip) => chip[2] !== chipToDelete));
  };

  return (
       chipData.map((item, index) => {
        let chipProps = { clickable:true };
        //point 3. allowing delete to those who is {showstu}
        if (showstu == item[2]) {
          chipProps.onDelete = () => handleDelete(item[2]);
          chipProps.className = classes.chip;
          chipProps.clickable = false;
        }

        return (
          <Chip
              //for key better to use index as a unique
              key={index}
              // this is spread operator (https://reactjs.org/docs/jsx-in-depth.html#spread-attributes) 
              {...chipProps}
              variant="outlined"
              label={
                <Typography variant="caption" color="textSecondary">
                  {item[0]} {item[1]}
                </Typography>
              }
              icon={<FaceIcon />}
            />
        );
      })
  );
}

const ResponsiveDrawer=（）=>{
//考虑到你正在获得showstu和gp能力作为道具或从某处
const classes=useStyles（）；
//第二点，你可以跳过这里，而不是每次都检查
常量[chipData，setChipData]=React.useState(
namefamily.slice（0，（（namefamily.length-2）-gpcapacity））
);
常量handleDelete=（chipToDelete）=>{
setChipData（（芯片）=>chips.filter（（芯片）=>chip[2]！==chipToDelete））；
};
返回(
chipData.map（（项目，索引）=>{
设chipProps={clickable:true}；
//第3点：允许删除{showstu}的用户
如果（showstu==项目[2]）{
chipProps.onDelete=（）=>handleDelete（第[2]项）；
chiprops.className=classes.chip；
chipProps.clickable=假；
}
返回(
);
})
);
}

这是官方消息。