React Material Multi Select 默认值未选中

Posted 2023-02-22

【中文标题】React Material Multi Select 默认值未选中

【英文标题】：React Matrial Multiselect defaultValue are not selected

【发布时间】：2020-07-26 07:29:45

【问题描述】：

我正在使用 multiple-values checkbox 处理 React Material 自动完成组件，似乎 defaultValue 道具和复选框示例存在问题。

如果我从列表中设置 defaultValue 一个项目，它将出现在文本输入标签中，但它不会显示为在自动完成下拉列表中选中。 如果 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 
];

【问题讨论】：

沙盒不工作。我看到这个错误(0 , _utils.unstable_useId) is not a function

@rzwnahmd 尝试在视图输出屏幕部分顶部的预览链接字段中“输入”

【参考方案1】：

如果您想使用列表中的值设置为 defaultValue 的 Autocomplete 组件 - 您应该使用确切的值（在您的情况下 - 是属于 @ 的确切对象987654324@你有。

您可以使用以下方法（例如）执行此操作：

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

【讨论】：

这在演示中有效，户田。没有解决问题，因为我从 api 获取值，默认值似乎只设置一次，并且在更新 dropdownOptions 时做出反应

您可以在获取数据后执行相同的操作 - 只需确保将其放入另一个变量并在 defaultValue 中使用该变量。您需要记住的是([1] == [1]) == false，因为它不是同一个对象。 Autocomlete 组件检查您在 defaultValue 中的值（以及在受控组件的情况下在 value 中）是否是完全相同的对象 - 所以您需要传递一个引用。

如果我在一个变量中使用相同的选项，则它不起作用，请参阅更多信息。 codesandbox.io/s/…

@kumbhanibhavesh 正如我的回答中提到的 - 您需要使用确切的对象（而不是不同的对象）。 <Autocomplete> 组件需要对该对象的引用，如果它不是完全相同的对象 - if 将不是您标记为“已选择”的对象。在 javascript a: 1 !== a:1 中，因为它们引用了不同的对象。