如何根据下拉选择值清除 mui 自动完成值？

Question

我有一个反应代码，其中包括左侧的一个 mui 下拉菜单和右侧的一个 mui 自动完成功能。左侧下拉列表具有三个类别作为其值：

dropDownVals = [

{ name: "State", values:[{title:"A", flag:true}, {title:"B", flag:false}]},

{ name: "Country", values=[{title:"C", flag:false}, {title:"E", flag:false}]}

]

我想在右侧自动完成中显示下拉选择的结果。我的意思是，如果用户在下拉列表中选择“州”，自动完成标签将更改为“州”，并且“A”和“B”显示在“州”下，在下拉列表中选择“国家/地区”也是如此。

我写了这个功能并且效果很好。但是，如果我选择“州”并选择“A”作为自动完成的选定选项，然后将下拉选定值更改为“国家/地区”，则“A”仍保留为自动完成的选定选项。每当我更改下拉选择时，如何清除自动完成值？

Answer 1

问题很可能与右侧自动完成的受控状态有关。在受控组件中，您的值最初不应为

undefined

。所以，如果你像这样存储正确的变量：

const [selectedRight, setSelectedRight] = useState();

您应该将其传递给自动完成功能，例如：

value={selectedRight || null}

为了防止将未定义的值永久传递给自动完成功能。

您可以查看 this StackBlitz，了解以编程方式清除 mui 自动完成值的实时工作示例。