更新材质UI的"TextField"值会导致页面上的其他文本字段值清除

Question

当在TextField的输入中检测到更改时，我正在尝试更新它的标签。

这是我最初的状态：

state = {
loginDetails: {
email: "[e-mail]",
password: "password"
},
isLoading: false,
error: null
};

以下是我的MatUI TextField元素的样子：

<TextField
type="text"
name="email"
label="email"
value={this.state.loginDetails.email || ""}
variant="outlined"
onChange={this.change}
/>
<TextField
type="password"
name="password"
label="password"
value={this.state.loginDetails.password || ""}
variant="outlined"
onChange={this.change}
/>

每当在TextField中检测到更改时，此函数就会启动：

change = event => {
this.setState({
loginDetails: { [event.target.name]: event.target.value }
});
};

我相信这句话：loginDetails: { [event.target.name]: event.target.value }就是问题所在。

如果我的状态看起来如下，使用以下更改功能，一切都按预期工作，并且没有清除/重置：

state = {
email: "[e-mail]",
password: "password"
isLoading: false,
error: null
};
...
change = event => {
this.setState({ [event.target.name]: event.target.value });
};

但是，出于多种原因，我希望电子邮件和密码在它自己的对象中。

以下是初始加载时页面的样子

以下是点击密码字段并键入字符(电子邮件字段清除(后发生的情况

Answer 1

从您的代码

change = event => {
this.setState({
loginDetails: { [event.target.name]: event.target.value }
});
};

您将loginDetails替换为具有单个字段(event.target.name(的对象

尝试合并对象而不是替换它。

例如

change = event => {
const newLoginDetails = Object.assign(
{},  
this.state.loginDetails,
{ [event.target.name]: event.target.value }
)
this.setState({
loginDetails: newLoginDetails
});
};

Answer 2

你是对的，问题就在这里

this.setState({
loginDetails: { [event.target.name]: event.target.value }
});

这将保留username或password，因为您只分配了一个字段loginDetails: { [event.target.name]: event.target.value }，

所以将其更改为：

this.setState((state) => {
loginDetails: {
...state.loginDetails, // <--- get username and password
[event.target.name]: event.target.value // <--- over write the field
}
});