Question

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

预先感谢

Answer 1

选择后，需要更新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

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

1 个答案: