[英]Updating MaterialUI's “TextField” value causes other TextField values on the page to clear
I'm trying to update the label of a TextField when ever a change is detected in its input.当在输入中检测到更改时,我正在尝试更新 TextField 的 label。
Here's my state initially:这是我的 state 最初:
state = {
loginDetails: {
email: "email@gmail.com",
password: "password"
},
isLoading: false,
error: null
};
Here's what my MatUI TextField elements look like:这是我的 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}
/>
Whenever a change is detected within the TextField itself, this function fires:每当在 TextField 本身中检测到更改时,就会触发此 function:
change = event => {
this.setState({
loginDetails: { [event.target.name]: event.target.value }
});
};
I believe this line: loginDetails: { [event.target.name]: event.target.value }
is the problem.我相信这一行: loginDetails: { [event.target.name]: event.target.value }
是问题所在。
If my state looked like the following, with the following change function, everything works as expected and there is no clearing/resetting:如果我的 state 如下所示,并进行以下更改 function,则一切正常,并且没有清除/重置:
state = {
email: "email@gmail.com",
password: "password"
isLoading: false,
error: null
};
...
change = event => {
this.setState({ [event.target.name]: event.target.value });
};
But, I want the email and password to be in its own object, for a multitude of reasons.但是,出于多种原因,我希望 email 和密码位于其自己的 object 中。
Here's what the page looks like on initial load这是页面在初始加载时的样子
Here's what happens after clicking into the password field and typing a character (the email field clears)这是单击密码字段并输入字符后发生的情况(email 字段清除)
You are right, issue is here你是对的,问题就在这里
this.setState({
loginDetails: { [event.target.name]: event.target.value }
});
this will either keep username
or password
, coz you are assigning only one field loginDetails: { [event.target.name]: event.target.value }
,这将保留username
或password
,因为您只分配一个字段loginDetails: { [event.target.name]: event.target.value }
,
So Change it to:所以将其更改为:
this.setState((state) => {
loginDetails: {
...state.loginDetails, // <--- get username and password
[event.target.name]: event.target.value // <--- over write the field
}
});
From your code从你的代码
change = event => {
this.setState({
loginDetails: { [event.target.name]: event.target.value }
});
};
You replaced loginDetails
with an object with a single field (event.target.name)您将loginDetails
替换为带有单个字段 (event.target.name) 的 object
Try merging the object instead of replacing it.尝试合并 object 而不是替换它。
For example例如
change = event => {
const newLoginDetails = Object.assign(
{},
this.state.loginDetails,
{ [event.target.name]: event.target.value }
)
this.setState({
loginDetails: newLoginDetails
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.