在模糊时基于其他字段更新字段值-React

时间:2019-05-14 19:04:21

标签: reactjs

在表单组件中,如果更改了字段中的任何一个并将其聚焦,则调用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);
});

};

0 个答案:

没有答案