使用 material-ui 的 TextField 和 getInputProps 在输入旁边创建标签

Question

我正在使用 material-ui TextField to create an input and a label for a typeahead picker type component with 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
});

我的前任在 material-ui InputLabel component, but in an attempt to get the aria-labelledby attributes working, I've got with a single TextField.

上定义了那些 inputLabelProps 属性

打印出 input 和 label 属性的内容给出：

//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，它包装了输入，但不显示任何内容。

p.s。我看过 Material-ui textfield with label，但我认为 FloatingLAbelText 不存在了？答案中的 link 已过时，并且与 propGetters 模式不兼容。

Answer 1

这里是评论中提到的demo的稍微简化的版本：

演示的 DownshiftMultiple 部分使用了标签。我只在我的沙盒中包含了第一个降档演示，但修改它以使用与 "multiple" 演示相同的方式使用标签。标签不属于 InputLabelProps，它只是 TextField 的属性。在演示中，这有点令人困惑，因为 label 在传递给 renderInput 的对象上被指定为属性，所以它最终只是作为 ...other 的一部分散布到 TextField.

上的对象

如果您查看 TextField 的相关代码，您会看到：

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

在这里你看到 InputLabelProps 不影响标签的 content ，只是影响其渲染的其他属性，所以你需要 label 作为属性直接在 TextField.

上

使用 material-ui 的 TextField 和 getInputProps 在输入旁边创建标签

Creating a label alongside an input using material-ui's TextField and getInputProps

javascript

reactjs

material-ui

downshift