使用材料的用户界面的TextField和getInputProps创建一个标签旁边的输入

Question

我使用的材料的UI TextField创建用于downshift一个预输入选择器型分量的输入和一个标签。

我见过的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
});

我的前任对材料的UI组件InputLabel定义的那些inputLabelProps属性，但在试图获得咏叹调，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，但不显示任何内容。

附：我见过Material-ui textfield with label，但我不认为FloatingLAbelText了存在？在回答这个链接是过时的，并与propGetters模式不兼容。

Answer 1

这是在评论中提到的demo的略微简化的版本：

演示的DownshiftMultiple部分中使用的标签。我只包含在我的沙盒第一降档的演示，但修改了它使用的标签相同的方式为“多”的试玩。标签不会在InputLabelProps属于，它仅仅是一个TextField的财产。在演示中，这是一个有点混乱跟随，因为label被指定为传递给renderInput对象上的属性，因此它刚刚结束的...other对象，它是传播到TextField的一部分。

如果你看一下TextField你会看到相关的代码：

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

在这里，你看到InputLabelProps不影响标签，只是影响其渲染的其他属性的内容，所以你需要label直接财产上TextField。