React Matrial Multiselect defaultValue не выбраны - PullRequest
Новая
       72

React Matrial Multiselect defaultValue не выбраны

0 голосов
/ 13 апреля 2020

Я работаю над компонентом автозаполнения React Material с флажком с несколькими значениями и похоже, что есть проблема с параметром defaultValue и примером с флажками.

Если установить значение по умолчанию для a элемент из списка, он появится в текстовой метке ввода, но он не будет отображаться, как отмечено в раскрывающемся списке автозаполнения. Я попытался установить элементы как проверенные, если они существуют в defaultValue, но это не решило проблему.

Как я могу установить элементы defaultValue, которые будут установлены, как проверено в раскрывающемся списке автозаполнения?

Condsandbox

Код: 

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
import CheckBoxIcon from "@material-ui/icons/CheckBox";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

export default function CheckboxesTags() {
  return (
    <Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={top100Films}
      defaultValue={[{ title: "The Shawshank Redemption", year: 1994 }]}
      disableCloseOnSelect
      getOptionLabel={option => option.title}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.title}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={params => (
        <TextField
          {...params}
          variant="outlined"
          label="Checkboxes"
          placeholder="Favorites"
        />
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: "Pulp Fiction", year: 1994 },
  { title: "The Lord of the Rings: The Return of the King", year: 2003 },
  { title: "The Good, the Bad and the Ugly", year: 1966 },
  { title: "Fight Club", year: 1999 },
  { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },
  { title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 },
  { title: "Forrest Gump", year: 1994 },
  { title: "Inception", year: 2010 },
  { title: "The Lord of the Rings: The Two Towers", year: 2002 },
  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
  { title: "Goodfellas", year: 1990 },
  { title: "The Matrix", year: 1999 },
  { title: "Seven Samurai", year: 1954 },
  { title: "Star Wars: Episode IV - A New Hope", year: 1977 },
  { title: "City of God", year: 2002 },
  { title: "Se7en", year: 1995 },
  { title: "The Silence of the Lambs", year: 1991 },
  { title: "It's a Wonderful Life", year: 1946 },
  { title: "Life Is Beautiful", year: 1997 },
  { title: "The Usual Suspects", year: 1995 },
  { title: "Léon: The Professional", year: 1994 },
  { title: "Spirited Away", year: 2001 },
  { title: "Saving Private Ryan", year: 1998 },
  { title: "Once Upon a Time in the West", year: 1968 },
  { title: "American History X", year: 1998 },
  { title: "Interstellar", year: 2014 }
];

enter image description here

1 Ответ

1 голос
/ 13 апреля 2020

Если вы хотите использовать значение из списка, которое будет установлено как defaultValue для компонента Autocomplete - вам следует использовать точное значение (которое в вашем случае - это точный объект, являющийся частью options, что у вас есть.

Вы можете сделать это (например), используя следующее: 

<Autocomplete
    options={ top100Films }
    defaultValue={ [ top100Films[0] ] }
    ...
/>
...