设置Material UI自动完成的默认值

本文介绍了设置Material UI自动完成的默认值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图将自动完成"的初始值设置为"ACCU-SEAL 35-532 Bag Sealer"，但出现以下错误:

I am trying to set the initial value of the Autocomplete to "ACCU-SEAL 35-532 Bag Sealer" but get the following error:

Material-UI:自动完成"的"getOptionLabel"方法返回的是未定义的，而不是"ACCU-SEAL 35-532 Bag Sealer"的字符串.

Material-UI: the 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "ACCU-SEAL 35-532 Bag Sealer".

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

so I tried to add the following to my Autocomplete:

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

但是我遇到了同样的错误.

but I get the same error.

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

I have an example of my code up here: codesandbox.io/s/material-demo-fv075?file=/formElementsEdit.jsx

在设置自动完成的初始值方面的任何帮助都将得到极大的帮助.

Any help in setting the initial value of the autocomplete would be greatly appriciated.

推荐答案

在自动完成"中使用具有options时，应使用选项包含的相同值.

When you use have options in the Autocomplete, you should use the same values that your options contains.

在您的示例中，每个选项都是具有value和label的对象.由于您在getOptionLabel函数中使用了label-您应该至少在要传递的对象中使用label.

In your examples each option is an object with value and label. Since you use that label in the getOptionLabel function - you should use at least the label in the object that you are passing.

选项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键的对象.

Option #3: ...

In any of the above options - the value of the property value should be an object with at least one key - the label key.

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

Check the following example based on your code: codesandbox.io/s/material-demo-zzfh7?file=/formElementsEdit.jsx