使用材质-用户界面的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
});

我的前任在材料 UI 输入标签组件上定义了这些输入标签Props 属性，但是为了让由属性标记的咏叹调工作，我使用了单个 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呈现标签。我得到的最接近的是一个带有label属性的div，它包装输入，但不显示任何内容。

p.s. 我见过带有标签的材料-ui文本字段，但我认为浮动标签文本不再存在了吗？答案中的链接已过期，并且与道具盖特斯模式不兼容。

Answer 1

下面是评论中提到的演示的一个稍微简化的版本:

演示的降档多个部分使用了一个标签。我只在我的沙盒中包含了第一个降档演示，但对其进行了修改，以使用与“多个”演示相同的标签。标签不属于输入标签Props，它只是文本字段的一个属性。在演示中，这有点令人困惑，因为标签被指定为传递给delageInput的对象的属性，因此它最终只是作为...其他对象，它是跨到文本字段。

如果您查看< code>TextField的相关代码，您会看到:

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

在这里，您可以看到InputLabelProps不会影响标签的内容，只会影响其他影响其呈现的属性，因此您需要将labelTextField上。