Как устранить проблему с перекрытием надписей для компонента автозаполнения пользовательского интерфейса React Material - PullRequest
Новая
       6

Как устранить проблему с перекрытием надписей для компонента автозаполнения пользовательского интерфейса React Material

0 голосов
/ 28 ноября 2018

Я новичок в реакции материала.Я хочу плавающую метку для автозаполнения компонента.но после выбора любого значения из опции автозаполнения ярлык должен наклеиваться сверху.Пожалуйста, перейдите на коды и поле см. Актуальную проблему.

Заранее спасибо

1 Ответ

0 голосов
/ 28 ноября 2018

Вам необходимо обновить свойство элемента 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
    }}
/>

Демо

...