在ReactJS中设置输入时出错，标签被覆盖/使用material.ui覆盖了输入集的值

如何解决在ReactJS中设置输入时出错，标签被覆盖/使用material.ui覆盖了输入集的值

下午好，开发者们！

我有一个小问题，我正在使用reactJS，并且我正在使用react-form-hook，其中我使用了Material-UI中的TextField。当我用名称cep填充输入时，它将调用一个函数，该函数将内容从此发送到api，该api返回返回的内容以在此处填充输入。问题是，当我尝试使用返回的内容设置输入时。输入标签保留在字段中，如照片所示，在最后一个输入中。答案就来了。

这些字段首先带有react-form-hook的setValues，但是在我尝试以此方式设置document.querySelector（'＃inputStreet'）之后，错误仍然存​​在。值=街道；

最后，我决定的方式是在此输入中创建每个输入以接收更新的useState

const [srua,setSrua] = useState ('');
const [sbairros,setSbairros] = useState ('');
const [scity,setScidade] = useState ('');
const [sUF,setSUF] = useState ('');

只有这样，他才能够解决标签不在输入内容上的问题，正如上次输入的照片中已经举例说明的那样，我相信这不是最正确的方法，所以我会像是如何更有效地解决此问题的帮助。就是这样

Repository link。

解决方法

您的TextField的问题在于InputLabel不会收缩。当TextField处于焦点或TextField的值不为空时，标签会缩小。

但是由于您是通过编程方式设置值的，因此输入不会集中，因此该值也不会被注册，因为它是不受控制的，这意味着TextField会跟踪并更新{{1 }}内部为您服务，而忽略外部value（如果提供）。

要使value像名称中所建议的那样可控，您必须从一开始就控制TextField的{​​{1}}，这就是您在问题中所做的

您还可以使用TextField的{​​{3}}简化此过程。它是一个包装器组件，可帮助您将常用道具传递给受控组件

value

可以缩写为

react-hook-form

实时演示

Controller