删除react js Material ui中的芯片

Question

我使用react js和Material ui芯片我加了很多筹码，然后一个筹码和文字一起出现了。我想拥有删除芯片的功能。但我不知道如何删除它。

如何使用onDelete={}删除它？

这只是我代码的一部分：

import React, { useEffect, useState, Component } from 'react'
import Chip from '@material-ui/core/Chip'
const useStyles = makeStyles(theme => ({
root: {
display: 'flex'
},
chip: {
backgroundColor: '#104d56'
},
}))

const handleDelete = () => {
console.log(hashtag);
};
const studentlist = []
function ResponsiveDrawer(props) {
{
namefamily.map((item, index) => {
if (index + 1 > namefamily.length - gpcapacity) {
if (showstu == item[2]) {
studentlist.push(
<Chip
key={item[2]}
className={classes.chip}
clickable={false}
variant="outlined"
label={
<Typography variant="caption" color="textSecondary">
{item[0]} {item[1]}
</Typography>
}
onDelete={handele}
icon={<FaceIcon />}
/>
)
} else
studentlist.push(
<Chip
key={item[2]}
variant="outlined"
clickable={true}
label={
<Typography variant="caption" color="textSecondary">
{item[0]} {item[1]}
</Typography>
}
icon={<FaceIcon />}
/>
)
}
})
}
}

handleDelete()函数的内部是什么？

Answer 1

根据我的理解

1. namefamily是数组的数组，即[['a','b','c'],['x','y','z']]
2. 您想使用if (index + 1 > namefamily.length - gpcapacity) {条件跳过一些学生筹码吗
3. 允许使用showstu == item[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 />}
/>
);
})
);
}