如何更新MUI TextField的默认值？

Question

我正在完成表单的最后步骤，但是在尝试在 MUI 的

defaultValue

的

TextField

变量中显示用户的当前名称时遇到了问题。

如果某个值从

""

/

null

开始或基本上为空，则无论您将该值从“”/null 更新多少次，

defaultValue

都将保持为空，有没有办法解决这个问题？

我有这个：

{console.log(tempName)}

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

tempName

开始为空，但随后我在

useEffect

中更新它，它带来了我登录 atm 的用户文档的数据，即使在有值之后，

defaultValue

仍为空/空/” ”.

我确实注意到了其他一些事情，如果你直接使用

user.displayName

它确实有效，但只有在你刷新之前（因为当你刷新用户返回到 null 时，然后像 0.2 segs 一样回到他的值）

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

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

    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文档上没有找到与此相关的任何内容。我所知道的是，他们从一开始就添加初始化值，而不是随着时间“更新”的值，我只是想在表单中显示用户的当前信息。

Answer 1

看看控制模式示例，

defaultValue

在后续渲染中不起作用，如果你想控制和更新值，请使用

value

属性。

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

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

那么defaultValue的用途是什么？如果您可以只使用占位符来表示“名称”之类的内容，然后使用值而不是默认值

如果您使用占位符，则

TextField

的默认值不会在表单中提交（可能不是您所期望的）。

Answer 2

我能想到的一个解决方案是向围绕输入元素的元素添加一个键。

key={tempName ? 'pre-filled' : 'blank'}

这样 - 默认值的更改将触发表单输入的重新渲染。 之后，默认值将就位，您无需恢复为受控形式。 当找不到预先填写的数据时，该表格显然仍然有效。

如果可以的话，我会尽量避免受控形式，这对我来说总是违反直觉！