Xóa chip trong react js Material-ui

Question

Tôi đã làm việc với chip react-js và Material-ui, tôi đã thêm nhiều chip và Sau đó, một chip hiển thị với văn bản. Tôi muốn có chức năng xóa chip. nhưng tôi không thể xóa nó.

tôi có thể xóa nó bằng cách onDelete={}nào?

đây chỉ là một phần mã của tôi:

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 />}
            />
          )
      }
    })
  }
}

những gì sẽ có bên trong của handleDelete()Chức năng?

Answer 1

Theo sự hiểu biết của tôi

1. namefamily là một mảng của mảng tức là [['a','b','c'],['x','y','z']]
2. bạn muốn bỏ qua một số chip sinh viên bằng cách sử dụng if (index + 1 > namefamily.length - gpcapacity) {điều kiện
3. cho phép xóa chip cho showstusinh viên sử dụng showstu == item[2]điều kiện

Trả lời: Bạn ResponsiveDrawertrông giống như

xem bình luận của tôi trong mã để biết thêm chi tiết.

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 />}
            />
        );
      })
  );
}