正确更新嵌套属性的状态
正确更新嵌套属性的状态
提问于 2018-08-29 07:15:23
在组件的状态下，我有以下数据结构。所有状态属性都是受控组件。
constructor(props) {
super(props);
this.state = {
companyName: '',
country: '',
contact: {
firstName: '',
lastName: '',
email: '',
phone: ''
}
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}例如，第一级属性“公司名称”定义为，
<Input label="Company Name" name="companyName" id="companyName" type="text" value={this.state.companyName} onChange={this.handleChange} required/>第二级属性"firstName“定义为，
<Input label="First Name" name="firstName" id="firstName" type="text" value={this.state.contact.firstName} onChange={this.handleChange} required/>我当前的handleChange(e)方法更新状态，但它向状态添加了第二级属性。更新状态的正确方法是什么？
handleChange(e) {
const { name, value } = e.target;
this.setState({
...this.state,
[name]: value,
contact: {
...this.state.contact,
[name]: value,
}
});
}回答 4
Stack Overflow用户
回答已采纳
发布于 2018-08-29 07:27:24
constructor(props) {
super(props);
this.state = {
companyName: '',
country: '',
contact: {
firstName: '',
lastName: '',
email: '',
phone: ''
}
};
// this.handleChange = this.handleChange.bind(this); => remove this, you don't need this, bind your functions where you define them using `=>` like I did in the example below
}用于输入字段
<Input label="Company Name" name="companyName" id="companyName" type="text" value={this.state.companyName} onChange={this.handleChange('rootLevel')} required />和你的第二级财产
<Input label="First Name" name="firstName" id="firstName" type="text" value={this.state.contact.firstName} onChange={this.handleChange('contact')} required/>onChange方法应该是这样的
handleChange = type => event => {
if (type === "rootLevel") {
this.setState({ [event.target.name]: event.target.value });
return;
}
const { name, value } = event.target;
this.setState({
[type]: {
...this.state[type],
[name]: value
}
});
};作为参考，我已经将其复制到Codesandbox中，您可以查看[这里]。
Stack Overflow用户
发布于 2018-08-29 07:28:51
造成此问题的原因是您添加了两次[name]: value。因此，如果更新第一级属性，也会添加第二级属性，反之亦然。
我建议你把这个州弄平。这样，您就可以继续使用相同的handleChange方法。
state = {
companyName: '',
country: '',
firstName: '',
lastName: '',
email: '',
phone: ''
};否则，必须在handleChange方法中说明要更新属性的级别。类似于：
handleChange(event, level) {
if (level === 1) { // or whatever way you think is best to get the right level
this.setState({
...this.state, [event.target.name]: event.target.value
});
} else {
this.setState({
...this.state,
content: {
...this.state.contact,
[event.target.name]: event.target.value
}
});
}
}您的输入如下所示：
<Input label="First Name" name="firstName" id="firstName" type="text" value={this.state.contact.firstName} onChange={(e) => this.handleChange(e, 2)} required/>Stack Overflow用户
发布于 2018-08-29 07:27:07
您正在为第一级和第二级哈希使用[name]。因此，如果您编辑，比如firstName，它也会将firstName添加到第一个级别。尝尝这个。
handleChange(e) {
const { name, value } = e.target;
if(['companyName', 'country'].includes(name)){
this.setState( prevState => {
...prevState,
[name]: value
});
}else{
this.setState( prevState => {
...prevState,
contact: {
...prevState.contact,
[name]: value,
}
});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52071600
复制相关文章
相似问题
腾讯云开发者
