Javascript 如何在物料界面中删除芯片

因此，我有一堆芯片，当用户在文本字段中键入并在创建时选择时呈现。然后一个芯片显示了文本。我想拥有删除芯片的功能。这是沙箱。我想特别了解handleDelete函数的作用

import React from "react";
import Avatar from "@material-ui/core/Avatar";
import Chip from "@material-ui/core/Chip";
import TextField from "@material-ui/core/TextField";
import { useState } from "react";
import Button from "@material-ui/core/Button";

export default function OutlinedChips() {
  const [hashtag, setHashtag] = useState("");
  const [numberOfHashtags, setNumberOfHashtags] = useState(0);
  const [arrayOfHashtags, addHashtag] = useState([]);
  const handleDelete = () => {
    console.log(hashtag);
  };
  const handleHashtagChange = event => setHashtag(event.target.value);

  const handleClick = () => {
    console.info("You clicked the Chip.");
  };
  const newHashtag = () => {
    if (numberOfHashtags < 3) {
      setNumberOfHashtags(numberOfHashtags + 1);
      addHashtag(arrayOfHashtags => arrayOfHashtags.concat(hashtag));
    } else {
      console.log("Too much hashtags");
    }
  };
  const Hashtags = arrayOfHashtags.map(h => (
    <Chip
      size="small"
      avatar={<Avatar>#</Avatar>}
      label={h}
      onDelete={handleDelete}
    />
  ));
  console.log(arrayOfHashtags);
  return (
    <div>
      <TextField
        size="small"
        inputProps={{
          style: { fontSize: 15 }
        }}
        id="outlined-multiline-static"
        multiline
        rows={1}
        placeholder="Description"
        variant="outlined"
        value={hashtag}
        onChange={handleHashtagChange}
      />
      <Button color="primary" onClick={newHashtag}>
        Create!
      </Button>
      {numberOfHashtags > 0 ? Hashtags : ""}
    </div>
  );
}

---

您应该做的第一件事是为每个芯片项绑定一个键，这样onDelete处理程序就可以决定在数组中删除哪个芯片。最后，筛选数组以删除具有匹配键的项

我认为你应该仔细阅读材料文档，已经有一个关于删除芯片的示例，下面是链接：

---

下面是我的解决方案：

您应该做的第一件事是为每个芯片项目绑定一个密钥，这样onDelete处理程序就可以决定在数组中删除哪个芯片。最后，筛选数组以删除具有匹配键的项

我认为你应该仔细阅读材料文档，已经有一个关于删除芯片的示例，下面是链接：

---

这是我的解决方案：

试试这个。。传递要删除的芯片，并将其删除。selected_search_tags是存储所有芯片的变量

remove(fruit: string): void {
    const index = this.selected_search_tags.indexOf(fruit);
    if (index >= 0) {
      this.selected_search_tags.splice(index, 1);
    }
  }

---

试试这个。。传递要删除的芯片，并将其删除。selected_search_tags是存储所有芯片的变量

remove(fruit: string): void {
    const index = this.selected_search_tags.indexOf(fruit);
    if (index >= 0) {
      this.selected_search_tags.splice(index, 1);
    }
  }

---

这会改变状态，我不认为它会更新组件这会改变状态，我不认为它会更新组件，因为状态只是你不需要的原始字符串。键，添加它会导致所有芯片被移除我有类似的问题，因为状态只是您不需要的原始字符串。key，添加它会导致删除所有的芯片