基于 Material UI 的 github 标签选择器示例如何删除 Material UI 芯片元素答案

【问题标题】：How to delete Material UI chip element based on Material UI's github label picker example基于 Material UI 的 github 标签选择器示例如何删除 Material UI 芯片元素
【发布时间】：2020-11-19 13:34:27
【问题描述】：

我正在使用 Material UI 自动完成组件的 github 标签选择器示例，并按照下面的沙箱对其进行了修改： https://codesandbox.io/s/material-demo-hwi3l?file=/demo.js

自动完成功能正常。当我从列表中选择公司名称时，它们在关闭后显示为筹码元素，而当我单独取消选择它们时，它们也会被隐藏。但是，我无法弄清楚如何通过单击芯片的关闭按钮来删除单个元素。我无法弄清楚到底要在芯片的 onDelete 属性中放入什么？

 {
          value.map((company, index) => (
            <Chip
              label={company.name}
              onDelete={(event, newValue) => {
                //setPendingValue(company);
              }}
              color="primary"
              className={classes.selectedCompanies}
            />
          ))
        }

由于沙盒中的芯片位于值数组中，我不确定如何在循环时从其中删除某些内容。任何帮助将不胜感激。

【问题讨论】：

标签： reactjs autocomplete material-ui

【解决方案1】：

从数组中删除的一种方法是过滤每个迭代项不是可删除项的位置。这样做会返回一个忽略可删除项的新数组。所以在你的例子中：

删除处理程序：

const handleDelete = name => {
  const newValue = value.filter(company => company.name !== name);
  setValue(newValue);
};

芯片元素：

{value.map((company) => (
  <Chip
    key={company.name}
    label={company.name}
    onDelete={() => handleDelete(company.name)}

The codesandbox with the solution

注意，在 React 中，你应该include the iterated key in each list item。

【讨论】：

非常感谢！