当 TextField 为空时 MUIInputLabel 不会增长

Posted 2023-02-22

【中文标题】当 TextField 为空时 MUIInputLabel 不会增长

【英文标题】：MUIInputLabel does not grow when TextField is empty

【发布时间】：2022-01-07 23:07:26

【问题描述】：

Material-UI docs 中的 TextFields 具有根据字段中是否存在值而增长和缩小的标签。

当按下按钮时，我尝试使用 JS 将我的 TextField 重置为""，而不是用户输入。这意味着如果用户在 TextField 中键入了数据，如果他们按下重置按钮，则该字段将被清除，而标签会增长以重新填充该字段。

发生的情况是，当我的数据被清除时，标签仍然很小。 我哪里错了？

我读到它与名为shrink 的东西有关，但我不明白它是如何调用的。

我的部分代码，使用 Material-UI 和 ReactJS 构建

EntryField 组件

<TextField onChange=inputChangedHandler label=props.label value=props.value type=props.type required=props.required name=props.name id=props.id inputRef=props.propsRef />

Form组件，它使用了上面的EntryField组件，以及ReactJS

const refNumRef = useRef();
const [objRefNum, setRefNum] = useState();

(...)

function resetData(event)
        setRefNum('')
    

(...)

<EntryField label="Ref Number" type="text" editData=setRefNum value=objRefNum
                                    id="input_refNum" name="refNum" propsRef=propRefNumRef />

【参考方案1】：

所以....在发布我的问题后，我进行了更多的尝试和错误，并且不知何故设法让它发挥作用；我不知道为什么。 但我所做的主要更改是将默认设置为useState，就像这样

const [objRefNum, setRefNum] = useState("");

不知何故，这不仅解决了TextField 的问题，还解决了我在Select 语句中遇到的问题，我无法将其重置为默认值。

我最终将不得不弄清楚如何根据 API 调用以编程方式声明这一点，其中默认值将根据结果发生变化......但现在这很好。