Material UI 自动完成不同的颜色标签？

Question

我刚开始学习 material-ui，但在搞清楚一些事情时遇到了一些问题。

1. 我希望在自动完成菜单中包含多个数组（例如 options={top100Films, top100Shows}，但当然要使用正确的语法）

2. 我想让标签的颜色根据它从哪个数组中选择而有所不同（而不是像现在一样全是紫色）

如果不可能有多个数组，也许 option.title 和 option.year 会分别显示在列表中，并且如果选择了不同的颜色标签？

如果有人知道如何执行此操作或类似操作，我将非常感谢您的帮助！

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { withStyles } from "@material-ui/core/styles";

const CustomAutocomplete = withStyles({
  tag: {
    backgroundColor: "#a0a",
    height: 24,
    position: "relative",
    zIndex: 0,
    "& .MuiChip-label": {
      color: "#fff",
    },
    "& .MuiChip-deleteIcon": {
      color: "#a0a",
    },
    "&:after": {
      content: '""',
      right: 10,
      top: 6,
      height: 12,
      width: 12,
      position: "absolute",
      backgroundColor: "white",
      zIndex: -1,
    },
  },
})(Autocomplete);

export default function Tags() {
  return (
    <div style={{ width: 500 }}>
      <CustomAutocomplete
        disableClearable="true"
        filterSelectedOptions="true"
        multiple
        id="tags-standard"
        options={final}
        getOptionSelected
        getOptionLabel={(o) => o}
        renderTags={(value, getTagProps) =>
          value.map((option, index) => (
            <Chip
              className={option.type === "film" ? "tagBlue" : "tagRed"}
              variant="outlined"
              label={`${option.title} ${option.year}`}
              {...getTagProps({ index })}
            />
          ))
        }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            placeholder="Favorites"
            margin="normal"
            fullWidth
          />
        )}
      />
    </div>
  );
}

const top100Shows = [
  { title: "Once ", year: 19 },
  { title: "Ameri", year: 1998 },
  { title: "ar", year: 2014 },
  { title: "Cas", year: 1942 },
  { title: "C", year: 1931 },
  { title: "P", year: 1960 },
  { title: "Thee", year: 1999 },
  { title: "The", year: 2011 },
  { title: "Mod", year: 1936 },
  { title: "Rai", year: 1981 },
  { title: "Rea", year: 1954 },
  { title: "The", year: 2002 },
  { title: "Tee", year: 2006 },
  { title: "Ci", year: 1988 },
  { title: "Tr", year: 2006 },
  { title: "Gra", year: 1988 },
];

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "Once Upon a Time in the West", year: 1968 },
  { title: "American History X", year: 1998 },
  { title: "Interstellar", year: 2014 },
  { title: "Casablanca", year: 1942 },
  { title: "City Lights", year: 1931 },
  { title: "Psycho", year: 1960 },
  { title: "The Green Mile", year: 1999 },
  { title: "The Intouchables", year: 2011 },
  { title: "Modern Times", year: 1936 },
  { title: "Raiders of the Lost Ark", year: 1981 },
  { title: "Rear Window", year: 1954 },
  { title: "The Pianist", year: 2002 },
  { title: "The Departed", year: 2006 },
  { title: "Cinema Paradiso", year: 1988 },
  { title: "The Lives of Others", year: 2006 },
  { title: "Grave of the Fireflies", year: 1988 },
];

const final = [
  ...top100Films.map((f) => Object.assign({}, f, { type: "film" })),
  ...top100Shows.map((s) => Object.assign({}, s, { type: "show" })),
];

Answer 1

向AutoComplete 组件提供包含选项的多个数组的唯一方法是合并它们。由于您想根据选项来自哪个单独的数组来呈现不同的标签，因此您必须跟踪每个选项的来源。您可以通过为每个电影和节目对象添加一个type 字段来做到这一点：

[
    ...top100Films.map(f => Object.assign({}, f, {type: 'film'})),
    ...top100Shows.map(s => Object.assign({}, f, {type: 'show'}))
]

然后，将生成的数组传递给 CustomAutocomplete 组件的 options 属性。

material-ui AutoComplete 组件有一个名为 renderTags 的 prop，它接受一个函数，该函数返回呈现的组件代替所选选项的标签。在这里，您可以实现基于选项的type 字段选择颜色的逻辑：

renderTags={(value, getTagProps) =>
    value.map((option, index) => (
        <Chip
            className={option.type === 'film' ? 'tagBlue' : 'tagRed'}
            variant="outlined"
            label={`${option.title} ${option.year}}
            {...getTagProps({ index })}
        />
    ))
}

确保导入Chip 组件并为AutoComplete 组件提供自定义getOptionSelected 函数以比较对象。

您可以在the material-ui docs找到更多信息。