时间戳

首页 > 解决方案 > 设置 Material UI Autocomplete 的默认值

reactjs - 设置 Material UI Autocomplete 的默认值

问题描述

我正在尝试将自动完成的初始值设置为“ACCU-SEAL 35-532 Bag Sealer”，但出现以下错误：

Material-UI：自动完成的“getOptionLabel”方法返回未定义而不是“ACCU-SEAL 35-532 Bag Sealer”的字符串。

所以我尝试将以下内容添加到我的自动完成中：

getOptionSelected={(option, value) => option.label === value}

但我得到同样的错误。

我在这里有一个我的代码示例：https ://codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx

在设置自动完成的初始值方面的任何帮助都会非常有用。

标签： reactjsmaterial-ui

解决方案

当您options在自动完成中使用 have 时，您应该使用您的选项包含的相同值。

在您的示例中，每个选项都是一个带有valueand的对象label。由于您label在getOptionLabel函数中使用它 - 您应该至少label在您传递的对象中使用它。

选项1：

const value = "ACCU-SEAL 35-532 Bag Sealer";
...
<Autocomplete
    ...
    value={{label: value}}

选项#2：

const value = "ACCU-SEAL 35-532 Bag Sealer";
...
<Autocomplete
    ...
    value={{label: value, value: 1}}

选项#3：...

在上述任何选项中 - 属性的值value应该是具有至少一个键的对象 -label键。

根据您的代码检查以下示例：https ://codesandbox.io/s/material-demo-zzfh7?file=/formElementsEdit.jsx

推荐阅读