如何解决反应-列表之类的状态正在失去价值
我的问题是……我使用的是表格,但是,当我从一个字段更改为另一个字段时,引用前一个字段状态的值会丢失。这样,在填充结束时,仅填充状态的最后一个字段。 我通过在填充了字段的onSubmit中包括一个局部变量来解决了这个问题,但是据我所了解,最佳实践是使用状态。 有人可以帮助我,告诉我我做不到的事情吗?非常感谢。
class AddItem extends React.Component {
constructor(props){
super(props);
this.state = {validated: false};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
item: {
titulo: '',descricao: '',estado: '',cidade: null,usuario: 1,data: new Date(),}
}
}
handleSubmit (event) {
const form = event.currentTarget;
console.log(item);
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}else{
api(this.state.item);
event.preventDefault();
}
this.setState({validated: true});
};
handleChange (event) {
let name = event.target.name;
let value = event.target.value;
this.setState({item: {[name]: value}});
};
解决方法
您不会在状态中保留任何先前的值:例如this.setState({validated: true});
将表示该状态不再具有item
属性。
将以前的状态扩展为新的状态,以免每次调用setState
时旧属性不会丢失:
this.setState({validated: true});
到
this.setState({ ...this.state,validated: true });
和
this.setState({item: {[name]: value}});
到
this.setState({ ...this.state,item: { ...this.state.item,[name]: value }} );
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。