Question

我刚刚开始学习Material-ui，但是在解决一些问题时遇到了一些问题。

我想在自动完成菜单中包含多个数组（例如options = {top100Films，top100Shows}，但是当然使用正确的语法）
我希望标签的颜色根据选择的阵列而有所不同（而不是像现在一样全是紫色）

如果不可能使用多个数组，则也许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'}))
]

然后，将结果数组传递到options组件的CustomAutocomplete属性。

material-ui AutoComplete组件具有一个名为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函数以比较对象。

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

材质UI自动完成不同的颜色标记？

1 个答案: