javascript - 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" })),
];

标签： javascriptreactjsautocompletematerial-uireact-material

Answer 1

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

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

然后，将生成的数组传递给组件的optionsprop CustomAutocomplete。

material-uiAutoComplete组件有一个 prop 调用renderTags，它接受一个函数，该函数返回呈现的组件代替所选选项的标签。在这里，您可以实现基于选项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组件并为组件提供自定义getOptionSelected函数AutoComplete以比较对象。

您可以在material-ui 文档中找到更多信息。