Создание метки рядом с входными данными с использованием TextField и getInputProps материала-пользовательского интерфейса - PullRequest
Новая
       13

Создание метки рядом с входными данными с использованием TextField и getInputProps материала-пользовательского интерфейса

0 голосов
/ 07 февраля 2019

Я использую Material-UI TextField, чтобы создать ввод и метку для компонента типа подборщика заголовка с понижением .

У меня естьвидел demos и получил это: 

<FormControl fullWidth className={classname}>
    <TextField fullWidth InputProps={ inputProps } InputLabelProps={ inputLabelProps } />
</FormControl>

Мои inputProps равны: 

const inputProps = getInputProps({ //passed in by {...downshiftProps} on the parent
    onChange, onKeyDown, disabled, error, label, value: inputValue,
    startAdornment: selectedItems.map(item => ...)
});

const inputLabelProps = getLabelProps({ //passed in by {...downshiftProps} on the parent
    disabled, required, error, disabled, shrink: true, id: inputProps.id
});

Мой предшественник имел те атрибуты inputLabelProps, определенные на материалеui InputLabel компонента, но в попытке заставить работать атрибуты aria-labelledby, я получил один TextField.

Распечаткасодержимое реквизита ввода и метки дает: 

//labelProps
{
    disabled: false,
    error: false,
    htmlFor: "downshift-0-input",
    id: "downshift-0-label",
    required: undefined,
    shrink: false
}

//inputProps
{
    aria-activedecendant: null,
    aria-autocomplete: "list"
    aria-controls: null,
    aria-labelledby: "downshift-0-label",
    autoComplete: "off"
    disabled: false,
    error: false,
    id: "downshift-0-input",
    onBlur: f(event),
    onChange: f(event),
    onKeyDown: f(event),
    startAdornment: [],
    value: ""
}

Моя проблема в том, что метка не отображается в DOM.Самое близкое, что я получаю - это div с атрибутом label, который оборачивает ввод, но ничего не отображает.

ps Я видел Текстовое поле Material-ui с меткой , но я не думаю, чтоFloatingLAbelText больше не существует?Ссылка в ответах устарела и не совместима с шаблоном propGetters.

1 Ответ

0 голосов
/ 08 февраля 2019

Вот несколько упрощенная версия демо , упомянутого в комментариях:

Edit Material demo

Часть DownshiftMultipleдемо использовало ярлык.Я включил только первое демо с понижением в моей песочнице, но изменил его, чтобы использовать метку так же, как и «множественный» демо.Метка не принадлежит InputLabelProps, это просто свойство TextField.В демонстрации это немного сбивает с толку, потому что label указывается как свойство объекта, переданного в renderInput, так что оно просто заканчивается как часть ...other объекта, который распространяется на TextField.

Если вы посмотрите на соответствующий код для TextField, то увидите: 

    {label && (
      <InputLabel htmlFor={id} ref={this.labelRef} {...InputLabelProps}>
        {label}
      </InputLabel>
    )}

Здесь вы видите, что InputLabelProps не влияет на содержимое метки, просто другие свойства, которые влияют на его рендеринг, поэтому вам нужно label как свойство непосредственно для TextField.

...