时间戳

首页 > 解决方案 > 如何更新 MUI TextField 的默认值？

javascript - 如何更新 MUI TextField 的默认值？

问题描述

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

如果一个值以""/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])

这就是它在火力基地中的样子

模拟数据

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

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

标签： javascriptreactjsmaterial-ui

解决方案

看一下受控模式示例，defaultValue不适用于后续渲染，如果要控制和更新值，请使用valueprop.

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

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

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

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

推荐阅读