时间戳

首页 > 解决方案 > OnChange 中缺少 React State 字段

reactjs - OnChange 中缺少 React State 字段

问题描述

我正在尝试在 React 中验证表单。每次在字段中更改输入时，我都会尝试验证它：

// Consutructor
this.state{
  Form_errors:
     Key1: false,
     Key2: false
}
handleChange(e, name){
                
    this.setState({
        [name]: e.target.valueAsNumber
    });
                
    // validate fields
    this.validate_field(e, name);
}

然后在表单提交时，我检查每个字段是否为真：

handle_submit(e){
    e.preventDefault(); 
                
    // validate form immediately                
    this.validate_form();
}

validate_form(){        
    // check all fields are true
    for (var field in this.state.form_errors) {
        if(!this.state.form_errors[field]){
            this.setState({
                validated: false
            });                     
            return false;
        }
    }
                
    this.setState({
        validated: true
    });
}

在这个阶段，validate_form()只看到最近更新的字段handleChange，所以在 1 次迭代后返回 true。如果我console.log是当前状态，则只有当前键值存在，其他键值不存在。

我也有条件类，render()一次只能看到一个字段。

为什么剩下的字段不见了state？

标签： reactjs

解决方案

当仅更新一个属性时，状态正在重置。

this.setState({
  [property]: newVal
});

这意味着这this.state.property2将被“遗忘”。正在做：

this.setState({
  ...this.state,
  [property]: newVal
});

推荐阅读