反应 TextField 材质 UI 值答案

【问题标题】：react TextField material UI value反应 TextField 材质 UI 值
【发布时间】：2021-06-26 11:22:13
【问题描述】：

我在模态中使用材料 UI 表单组件。可以打开此模式以添加或编辑项目，因此值可以为空或不为空。我将默认道具值置于一个状态，但这总是空的，永远不会得到以前的值...... 这是我的代码：

const Comp = (props) => {
  const { edit, values } = props // edit props for editing user
  // values is :
   {
     prenom: 'name',
     nom: 'name'
   }
   // ...
   const [nom, setNom] = React.useState(edit ? values.nom : '')
   const [prenom, setPrenom] = React.useState(edit ? values.prenom : '')
   // ...
   return (
      <form>
              <TextField
                id="prenom"
                value={prenom}
                label="Prénom"
                variant="outlined"
                onChange={(event) => setPrenom(event.target.value)}
              />
              <TextField
                id="nom"
                value={nom}
                label="Nom"
                variant="outlined"
                onChange={(event) => setNom(event.target.value)}
              />
      </form>
   )
}

感谢您的帮助

【问题讨论】：

你能把你的代码放到 Codesandbox 上吗？

标签： reactjs input material-ui state

【解决方案1】：

我猜你在父级上使用了Comp，但在某些状态更改之前不可见，例如isDialogOpen。然后，一旦用户想要编辑某些对象，您就可以执行类似的操作

setIsDialogOpen(true);
setDialogEditMode(true);
setValuesToEdit({nom: 'Foo', prenom: 'Bar'});

你必须明白，一旦你使用了组件 (<Comp prop='value' />)，React 就会渲染它，即使没有任何东西到达实际的 Dom，Comp 函数也会被调用！所以起初它被一些空值调用，然后你想让用户进行编辑，你改变父状态。但是Comp 状态仍然是它创建时使用的状态（空值）。

记住这一点：useState 有两种作用：

在第一次渲染时，它会返回给定参数的值。
任何未来都会呈现它忽略参数并返回保存的状态。

因此，为了更改已保存的状态，您必须在道具更改时声明反应/效果，您可以在 Comp 中使用 useEffect 来执行此操作

例如：

useEffect(() => {
   setNom(values.nom);
   setPrenom(values.prenom);
}, [values])

【讨论】：