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

Question

开发者下午好!!

我有一个小问题，我正在使用 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 .

Answer 1

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

但由于您是以编程方式设置值，因此输入未获得焦点，该值也未注册，因为它不受控制，这意味着 TextField 会跟踪并更新value 在内部为您提供，忽略外部 value(如果提供)。

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

您还可以使用react-hook-form 的Controller 来简化这个过程。 .它是一个包装器组件，可帮助您将常用 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=""
/>

现场演示