Javascript 如何将dropdownlist重置为初始状态？

我使用MaterialUI创建了两个级联下拉列表。它们工作得很好，除了一件事： 如果在子dropdownlist中选择了一个值，则无法将其重置为初始状态

这是最初的情况：

请注意，dropdownlist的标签“Parent”和“Child”位于dropdownlist内部

在我在第一个dropdownlist中进行选择后，标签“Parent”显示在dropdownlist的左上角，如预期的那样：

这也使我能够为其中一个孩子做出选择：

对于该下拉列表，标签“Child”现在显示在下拉列表的左上角。正如所料

现在，最后一步有一个问题。当我选择不同的父项时，我会清除子项，但标签“Child”不会返回到初始情况的位置：

这是我创建的代码：

从“React”导入React；
从“@material ui/core”导入{Grid，TextField}；
导出默认类ParentChild扩展React.Component{
建造师（道具）{
超级（）；
此.state={
家长：[
],
selectedParent:空，
selectedChild:空
}
this.dropdownData=this.dropdownData.bind（this）；
}
componentDidMount（）{
这个.dropdownData（）；
}
下拉数据（）{
这是我的国家({
父项：[{label:，值：]，子项：[]，禁用：“true”}，
{
标签：“Parent1”，值：“Parent1”，子项：[{标签：“Child1.1”，值：“Child1.1”}，
{标签：“Child1.2”，值：“Child1.2”}，
{标签：“Child1.3”，值：“Child1.3”}]
},
{
标签：“Parent2”，值：“Parent2”，子项：[{标签：“Child2.1”，值：“Child2.1”}，
{标签：“Child2.2”，值：“Child2.2”}]
}]
}
);
this.setState（{selectedParent:“}）；
this.setState（{selectedChild:“}）；
}
render（）{
让parent=this.state.parents.filter（p=>{
返回p.value==this.state.selectedParent
})
if（parent.length==0）{
父项=[{子项：[]}]
}
返回(
{this.state.parents.map（（选项）=>(
{option.label}
))}
{[{label:null，value:null，禁用：“true”}，…父项[0]。子项].map（（选项）=>(
{option.label}
))}
);
}
handleChangeParent=（事件）=>{
这是我的国家({
selectedParent:event.target.value，
});
这是我的国家({
所选子项：“
});
};
handleChangeChild=（事件）=>{
这是我的国家({
selectedChild:event.target.value
});
};
};