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

大家下午好

我有一个小问题，我使用的是reactJS，我使用的是

react form hook

，其中我使用了materialui中的

TextField

。当我用名称cep填充一个输入时，它调用一个函数，该函数将该输入的内容发送到一个api，api返回内容以填充输入，问题发生在我尝试用返回的内容设置输入时。在最后一次输入中，输入标签保留在字段上，如照片中所示。这就是答案

字段首先包含设置值​​但在我尝试设置document.querySelector（“#inputStreet”）的这种方式后，错误仍然存在。价值=街道

最后，我决定的方法是在这个输入中创建一个useState，用于接收每个输入的更新

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

只有通过这种方式，他才能解决标签不在输入内容上的问题，正如上一次输入的照片中所示，我相信这不是最正确的方式，因此我希望能得到如何更有效地解决这一问题的帮助。就这样

---

您的

文本字段的问题在于
输入标签没有收缩。当
TextField
处于焦点或
TextField
的值不为空时，标签会收缩

但是，由于您是通过编程方式设置值，因此输入没有焦点，值也没有注册，因为它是不受控制的，这意味着
文本字段
在内部为您跟踪和更新
值
，而忽略外部
值
（如果提供）

为了使
TextField
可控，如名称所示，您必须从一开始就控制
TextField
的
值，这就是您在问题中所做的

您还可以使用
react hook form
简化此过程。它是一个包装器组件，帮助您将常用道具传递给受控组件

(
onChange（e.target.value）}
value={value}
name={name}
label=“电子邮件”
/>
)}
name=“电子邮件”
control={control}
//需要初始化值才能将TextField注册为受控
//如果我们不提供，默认值是未定义的，这意味着不受控制
defaultValue=“”
/>

可以缩短到这个

}
name=“电子邮件”
control={control}
defaultValue=“”
/>

现场演示