具有预加载值的 React Material-UI TextField 不会移动标签（标签与 TextField 内容重叠）答案

【问题标题】：React Material-UI TextField with preloaded value does not move the label (label overlaps with the TextField content)具有预加载值的 React Material-UI TextField 不会移动标签（标签与 TextField 内容重叠）
【发布时间】：2021-08-19 10:09:15
【问题描述】：

我有 Material-UI 文本字段：

<TextField id="gen_ref_num" className="col-6 form-control-sm" label="Number" variant="filled" value={this.props.invoice.gen_ref_num} onChange={this.handleChange}/>

this.props.invoice.gen_ref_num 的值已经预加载。不幸的是，标签与内容重叠。当我开始编辑该字段时，标签会向上移动并位于正确的位置（不再重叠）。如何要求 Material-UI TextField 尊重预加载的值并向上移动标签？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

Wrap with form 为我解决了这个问题。应该是这样的：

<form autoComplete="off">
    <TextField ... />
</form>

【讨论】：

【解决方案2】：

下面的代码就是答案：

InputLabelProps={{ shrink: !!this.state.value }}

当适应问题中的代码时，代码ir：

InputLabelProps={{ shrink: !!this.props.invoice.gen_ref_num }}

https://github.com/mui-org/material-ui/issues/13013 上写了更多关于此的文章

【讨论】：

我认为这是在值为 null 时发生的问题？这是同一种情况吗？
我不确定。如果值为空，则可以，如果标签位于内容位置/位置，则设计如此。