在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

enter image description here

解决方法

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

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

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

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

value

可以缩写为

react-hook-form

实时演示

Controller