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

我是新来的实质性用户界面。我想要自动完成组件的浮动标签。但是从自动完成选项标签中选择任何值后，标签应贴在顶部。
请转到codesandbox查看实际问题。

提前致谢

最佳答案

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

Demo