如何更新 MUI TextField 的默认值？答案

【问题标题】：How to update default value of MUI TextField?如何更新 MUI TextField 的默认值？
【发布时间】：2021-10-18 01:16:03
【问题描述】：

我正在完成表单的最后一步，但是当我尝试在来自 MUI 的 TextField 的 defaultValue 变量中显示用户的当前名称时遇到了问题。

如果一个值以""/null 开头或基本上为空，则defaultValue 将保持为空，无论您将该值从“”/null 更新多少次，有没有办法修复那个？

我有这个：

{console.log(tempName)}

<TextField 
required 
margin="dense" 
label='Nombre' 
defaultValue= {tempName} 
onChange={handleChangeName} />

tempName 开始为空，但随后我在 useEffect 中更新它，我有它带来了我登录 atm 的用户文档的数据，即使在具有值之后 defaultValue 保持为空/null /""。

我确实注意到了其他一些事情，如果您直接使用user.displayName，它确实有效，但只有在您刷新之前（因为当您刷新用户返回 null 然后像 .2 segs 一样回到他的值）

这是我在刷新前使用用户时的样子

由于用户同时带来了姓名和姓氏（基本上是显示名），我想将其拆分，并且所有用户信息都在一个文档中：

    const [tempName, setTempName] = useState("");
    const [tempLastName, setTempLastName] = useState("");
    const [tempEmail, setTempEmail] = useState("");
    const [tempPhone, setTempPhone] = useState("");
    const [tempIdType, setTempIdType] = useState("");
    const [tempIdTypes, setTempIdTypes] = useState("");

    useEffect(() => {
        const userDoc = db.collection('usuarios').doc(user.uid);
        userDoc.get().then(doc => {
            if (doc.exists) {
                const tempData = [];
                const data = doc.data();
                tempData.push(data);
                setTempName(tempData[0].name)
                setTempLastName(tempData[0].lastName)
                setTempEmail(tempData[0].email)
                setTempPhone(tempData[0].phone)
                setTempIdType(tempData[0].id)
                setTempIdTypes(tempData[0].idType)
                setOldPassword(tempData[0].password)
            }
          });
    }, [user])

这就是它在 Firebase 中的样子

这就是假设的工作方式吗？

我原以为defaultValue 会更新为您给它的值...谢谢，我在TextField documentation 上没有找到与此相关的任何内容。我所知道的是他们从一开始就添加了初始化值，而不是随着时间“更新”的值，我只是想在表单中显示用户的当前信息。

【问题讨论】：

看看controlled mode，defaultValue对后续渲染不起作用，如果要控制和更新值，使用value prop。
Welp 成功了，哈哈，那么 defaultValue 的目的是什么？如果您可以将占位符用于“名称”之类的内容，然后使用 value 而不是 defaultValue
哦，nvm，如果我使用 value 我什么都不能输入
你可以，看我给你链接的上面例子中的现场演示，你需要正确使用onChange和value。
react-hook-form 为您处理表单状态，因此您不必手动跟踪值，并且可以删除代码中的所有 setState/state，只需指定 @ 987654349@ 属性和验证规则，您可以在此处浏览文档更多示例。

标签： javascript reactjs material-ui

【解决方案1】：

看一下controlled mode 的例子，defaultValue 对后续渲染不起作用，如果你想控制和更新值，请使用value 属性。

默认值通常用在uncontrolled mode 中，该值由 DOM 元素控制，而不是自身做出反应，唯一改变它的方法是在首次挂载时设置一个初始值。非受控组件的值只能在提交表单或验证值时访问（不使用 ref），如果您想根据用户键入的值动态更新状态，请使用受控模式。

value={value}
onChange={e => setState(e.target.value)}

那么 defaultValue 的目的是什么？如果您可以将占位符用于“名称”之类的内容，然后使用 value 而不是 defaultValue

如果您使用占位符，TextField 的默认值将不会在表单中提交（可能不是您所期望的）。

【讨论】：