问题描述
下午好,开发者们!
我有一个小问题,我正在使用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 ('');
只有这样,他才能够解决标签不在输入内容上的问题,正如上次输入的照片中已经举例说明的那样,我相信这不是最正确的方法,所以我会像是如何更有效地解决此问题的帮助。就是这样
解决方法
您的TextField
的问题在于InputLabel
不会收缩。当TextField
处于焦点或TextField
的值不为空时,标签会缩小。
但是由于您是通过编程方式设置值的,因此输入不会集中,因此该值也不会被注册,因为它是不受控制的,这意味着TextField
会跟踪并更新{{1 }}内部为您服务,而忽略外部value
(如果提供)。
要使value
像名称中所建议的那样可控,您必须从一开始就控制TextField
的{{1}},这就是您在问题中所做的
您还可以使用TextField
的{{3}}简化此过程。它是一个包装器组件,可帮助您将常用道具传递给受控组件
value
可以缩写为
react-hook-form