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

【问题标题】：Error when setting an input in ReactJS, label is over / overwrites the value of the input set, using the material.ui在 ReactJS 中设置输入时出错，标签已覆盖/覆盖输入集的值，使用 material.ui
【发布时间】：2020-09-19 22:04:19
【问题描述】：

开发者们下午好！！

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

【问题讨论】：

标签： javascript reactjs material-ui react-hooks react-hook-form

【解决方案1】：

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

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

为了使TextField可控，正如名字所暗示的，你必须从一开始就控制TextField的value，这就是你在问题中所做的。

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

<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=""
/>

现场演示

【讨论】：