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

Question

我是 React Material UI 的新手。我想要自动完成组件的浮动标签。但从自动完成选项标签中选择任何值后，应贴在顶部。请转到代码和框查看实际问题。

提前致谢

Answer 1

选择完成后，您需要更新选择元素的属性。为此，我正在使用 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
    }}
/>

演示