删除React JS Material-UI中的芯片 [英] Delete chip in react js Material-ui

问题描述

我使用react-js和Material-ui芯片我添加了许多筹码，然后文本中出现了筹码.我想具有删除芯片的功能.但我无法删除它.

I worked with react-js and Material-ui chip I added many chips and Then a chip shows up with the text. I want to have the functionality to delete the chip. but I cant how to delete it.

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

这只是我的代码的一部分:

here is just part of my code:

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()函数将包含什么?

推荐答案

根据我的理解

1. namefamily 是一个数组数组，即 [['a'，'b'，'c']，['x'，'y'，'z']]
2. 您想使用 if(index + 1> namefamily.length-gpcapacity){条件
跳过一些学生筹码
3. 允许使用 showstu == item [2] 条件为 showstu 学生删除筹码

1. namefamily is an array of array i.e. [['a','b','c'],['x','y','z']]
2. you want to skip some student chips using if (index + 1 > namefamily.length - gpcapacity) { condition
3. allow delete chips for showstu student using showstu == item[2] condition

答案:您 ResponsiveDrawer 看起来像

有关更多详细信息，请参见我在代码中的评论.

Ans: You ResponsiveDrawer looks like

see my comment in code for more details.

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

这篇关于删除React JS Material-UI中的芯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！