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

Question

我是 react Material UI 的新手。我想要自动完成组件的 float 标签。但从自动完成选项中选择任何值后，标签应粘贴在顶部。请前往codesandbox查看实际问题。

提前致谢

Answer 1

做出选择后，您需要更新选择元素的属性。为此，我使用状态 shr​​ink，最初为 false，一旦选择该项目，就会设置 true。如果状态 shr​​ink 为 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