如何解决React Material UI自动完成组件的标签重叠问题

选择后，您需要更新select元素的属性。为此，我使用的是state shrink，它false最初true是在选择项目后设置的。如果状态shrink为true，则InputLabelProps设置为{shrink: true}。否则，将设置空对象。

state = {
    single: null,
    multi: null,
    shrink:false //Newly added
};    

handleChange = name => value => {
    this.setState({
       [name]: value
    });

    this.setState({shrink:true}); //Newly added
}; 

<Select
    classes={classes}
    styles={selectStyles}
    options={suggestions}
    components={components}
    value={this.state.single}
    onChange={this.handleChange("single")}
    placeholder="Search a country (start with a)"
    textFieldProps={{
        label: "Label",
        InputLabelProps: this.state.shrink?{shrink:true}:{} //Modified line
    }}
/>

演示版