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

Question

Я использую материал-интерфейс TextField создать ввод и метку для компонента типа выбора заголовка с понижением.

Я видел демо, и получил это:

<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, определенные на материале 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.

Answer 1

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

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

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

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

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