在表单组件中,如果更改了字段中的任何一个并将其聚焦,则调用api以获取其他字段值。这意味着,根据“ A”字段中的输入,将更改“ B”和“ C”。尝试使用setState设置数据。但是它没有显示最新的更新值。由于我使用的是Material Ui概述的输入,因此在设置状态后,将认为“ B”和“ C”不存在任何值。因此,标签与值重叠。如何克服这两种情况。
handleFieldBlur = (event, obj) => {
const formvalues = { ...this.state.formValues }; //It's a object which has keys and value pairs of form field and value
formvalues[Object.keys(obj)[0]] = Object.values(obj)[0];
let reqObj = {
...this.state.formValues,
changedField: Object.keys(obj)[0],
changedValue: Object.values(obj)[0],
[Object.keys(obj)[0]]: Object.values(obj)[0],
};
// this.state.formData will have the data as follows
computeFormValues(reqObj).then(res => {
const tempFormData = { ...this.state.formData };
const tempFieldValues = { ...res };
const tempArr = ["plan", "material", "version", "plant"];
console.log('tempFormData',tempFormData);
tempFormData.controls.map(item => {
if (tempArr.indexOf(item.fieldId) === -1)
item["defaultValue"] = tempFieldValues[item.fieldId];
else
item["defaultValue"] = tempFieldValues["planDetailId"][item.fieldId];
});
this.setState({
formData: tempFormData
});
console.log('blur state',this.state);
});
};