Блог

Главная - Вопросы по программированию - Реагируйте на материал-текстовое поле пользовательского интерфейса с предварительно загруженным значением не перемещает метку (метка перекрывается с содержимым текстового поля)

Реагируйте на материал-текстовое поле пользовательского интерфейса с предварительно загруженным значением не перемещает метку (метка перекрывается с содержимым текстового поля)

#reactjs #material-ui

Вопрос:

У меня есть текстовое поле Material-UI:

 <TextField id="gen_ref_num" className="col-6 form-control-sm" label="Number" variant="filled" value={this.props.invoice.gen_ref_num} onChange={this.handleChange}/>

И this.props.invoice.gen_ref_num имеет значение, уже предварительно загруженное. К сожалению, этикетка перекрывается с содержимым. Когда я начинаю редактировать поле, метка перемещается вверх и занимает правильное положение (больше не перекрывается). Как попросить текстовое поле Material-UI соблюдать предварительно загруженные значения и переместить метку вверх?

Ответ №1:

Обертка с формой исправила эту проблему для меня. Это должно быть так:

 <form autoComplete="off">
    <TextField ... />
</form>

Ответ №2:

Следующий код является ответом:

 InputLabelProps={{ shrink: !!this.state.value }}

При адаптации к коду в вопросе код ir:

 InputLabelProps={{ shrink: !!this.props.invoice.gen_ref_num }}

Подробнее об этом написано на https://github.com/mui-org/material-ui/issues/13013

Комментарии:

1. Я думал, что это проблема, которая возникает, когда значение есть null ? это тот же самый случай?

2. Я не уверен. Если значение равно нулю, то все в порядке, если метка находится в месте/позиции содержимого, это так по замыслу.

Метки: