gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 04:58:26 25 4
gpt4 key购买 nike

开发者下午好!!

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

字段先用react-form-hook的setValues,但是我尝试这样设置后错误依旧 document.querySelector('#inputStreet')。值(value)=街道;

最后我决定的方法是在这个接收更新的输入中为每个创建一个 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 会跟踪并更新value 在内部为您提供,忽略外部 value(如果提供)。

为了使 TextField 可控,如名称所示,您必须控制 TextFieldvalue开头是你在问题中所做的。

您还可以使用react-hook-formController 来简化这个过程。 .它是一个包装器组件,可帮助您将常用 Prop 传递给受控组件

<Controller
render={({ onChange, onBlur, value, name }) => (
<TextField
onBlur={onBlur}
onChange={(e) => onChange(e.target.value)}
value={value}
name={name}
label="Email"
/>
)}
name="email"
control={control}
// need to initialize value to register the TextField as controlled
// if we don't provide, the default value is undefined, which means uncontrolled
defaultValue=""
/>

可以缩短为这个

<Controller
render={(props) => <TextField {...props} label="Email" />}
name="email"
control={control}
defaultValue=""
/>

现场演示

Edit 63973773/error-when-setting-an-input-in-reactjs-label-is-over-overwrites-the-value-of

关于javascript - 在 ReactJS 中设置输入时出错,标签覆盖/覆盖输入集的值,使用 material.ui,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63973773/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com