可以选择的标记的MUI芯片(复选框类似行为)

Question

我有一个JSON文件，在这里我从

[
    { "id": "4", "name": "Caucasian" },
    { "id": "5", "name": "Asian" },
    { "id": "6", "name": "Middle Eastern" },
    { "id": "7", "name": "Eurasian" },
    { "id": "8", "name": "African" },
    { "id": "10", "name": "Caribbean" },
    { "id": "11", "name": "Scandinavian European" },
    { "id": "12", "name": "Afro American" },
    { "id": "13", "name": "Latin American" },
    { "id": "14", "name": "European" },
    { "id": "15", "name": "Slavic European" },
    { "id": "16", "name": "American Indian" },
    { "id": "17", "name": "Inuit" },
    { "id": "21", "name": "Aboriginal/Torres Strait" },
    { "id": "22", "name": "Maori" },
    { "id": "23", "name": "Pacific Islander" },
    { "id": "24", "name": "Indian" },
    { "id": "26", "name": "Cambodian" },
    { "id": "27", "name": "Korean" },
    { "id": "28", "name": "Vietnamese" },
    { "id": "29", "name": "Thai" },
    { "id": "30", "name": "Chinese" },
    { "id": "31", "name": "Malaysian" },
    { "id": "32", "name": "Filipino" },
    { "id": "33", "name": "Japanese" },
    { "id": "34", "name": "Indonesian" },
    { "id": "35", "name": "Singaporean" },
    { "id": "147", "name": "Fijian" },
    { "id": "148", "name": "Tongan" },
    { "id": "150", "name": "Cook Islander" },
    { "id": "156", "name": "Northern European" },
    { "id": "157", "name": "Latin European" },
    { "id": "158", "name": "Central American" },
    { "id": "159", "name": "South American Indian" },
    { "id": "160", "name": "Hawaiian" },
    { "id": "161", "name": "East African" },
    { "id": "162", "name": "West African" },
    { "id": "163", "name": "Northern African" },
    { "id": "164", "name": "Eskimo" },
    { "id": "165", "name": "Arabic" },
    { "id": "166", "name": "Southern African" }
]

我把这些数据映射成MUI芯片

{chipData.map((c) => (
    <Chip label={c.name} key={c.id} onClick={handleClick} />
))}

我需要做的是使每个芯片可选，然后让所有选定的芯片转移，以匹配选择的芯片使用一个自动完成按钮点击。

因此，基本上，将有两种方式选择芯片。

1. 使用自动完成(类型和选择)模式的
2. ，该模式显示所有芯片，并能够像选中复选框(单击和选择)

一样选择它

我尝试过使用useState，但问题是所有的芯片都共享一个useState，所以每当选择/取消选择一个芯片时，所有的芯片都会遵循。

我被困在这里，但似乎找不到一个类似的解决方案，我正在努力做的。任何洞察力/解决方案都会有帮助！

Answer 1

​

function Chip({name, onClick, variant, children}){
    return (
        <div className={variant} onClick={onClick}>{children}</div>
    )
}

const listOfChips = [
  { id: "4", name: "Caucasian" },
  { id: "5", name: "Asian" },
  { id: "6", name: "Middle Eastern" },
  { id: "7", name: "Eurasian" },
  { id: "8", name: "African" },
  { id: "10", name: "Caribbean" },
  { id: "11", name: "Scandinavian European" },
  { id: "12", name: "Afro American" },
  { id: "13", name: "Latin American" },
  { id: "14", name: "European" },
  { id: "15", name: "Slavic European" },
  { id: "16", name: "American Indian" },
  { id: "17", name: "Inuit" },
  { id: "21", name: "Aboriginal/Torres Strait" },
  { id: "22", name: "Maori" },
  { id: "23", name: "Pacific Islander" },
  { id: "24", name: "Indian" },
  { id: "26", name: "Cambodian" },
  { id: "27", name: "Korean" },
  { id: "28", name: "Vietnamese" },
  { id: "29", name: "Thai" },
  { id: "30", name: "Chinese" },
  { id: "31", name: "Malaysian" },
  { id: "32", name: "Filipino" },
  { id: "33", name: "Japanese" },
  { id: "34", name: "Indonesian" },
  { id: "35", name: "Singaporean" },
  { id: "147", name: "Fijian" },
  { id: "148", name: "Tongan" },
  { id: "150", name: "Cook Islander" },
  { id: "156", name: "Northern European" },
  { id: "157", name: "Latin European" },
  { id: "158", name: "Central American" },
  { id: "159", name: "South American Indian" },
  { id: "160", name: "Hawaiian" },
  { id: "161", name: "East African" },
  { id: "162", name: "West African" },
  { id: "163", name: "Northern African" },
  { id: "164", name: "Eskimo" },
  { id: "165", name: "Arabic" },
  { id: "166", name: "Southern African" },
];

function App() {
  const [allChips, setAllChips] = React.useState(listOfChips);
  const [selected, setSelected] = React.useState(new Set());

  function handleSelectionChanged(id) {
    // treat state as immutable
    // React only does a shallow comparison so we need a new Set
    const newSet = new Set(selected);
    if (newSet.has(id)) newSet.delete(id);
    else newSet.add(id);
    setSelected(newSet);
  }

  return (
    <React.Fragment>
      {allChips.map((c) => (
        <Chip
          key={c.id}
          onClick={() => handleSelectionChanged(c.id)}
          variant={selected.has(c.id) ? "filled" : "outlined"}
        >
          {c.name}
        </Chip>
      ))}
    </React.Fragment>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

div {
  border-radius: 20px;
  padding: 10px;
  margin: 10px;
}

.filled {
   background-color: black;
   color: white;
   border: 1px solid white;
}

.outlined {
   background-color: white;
   color: black;
   border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

​

一种方法(还有其他方法)是使用一个Set，它保存已经选择的所有ID，并且基于如果ID在集合中或不存在的情况下，您可以执行一些条件呈现。

--我在这里创建了一个组件芯片，以证明它可以工作--当然，您可以使用MUI芯片，也可以使用variant道具，或者其他什么东西。

每当单击Chip时，只需检查它是否在集合内。如果不是，就把它加进去。如果是的话，就把它移开。

就您在输入字段中的输入而言，这种方法是非常直接的。您需要一个输入字段和onChange，您需要通过name搜索可能的芯片，例如使用startsWith() (或一些更高级的自动完成功能)，一旦用户选择特定的芯片，您将拥有该芯片的id，并可以使用该ID调用handleSelectionChanged(id)。这当然意味着，如果您键入它两次，它将再次被删除，但您当然也可以为此更改逻辑。