React中的动态表单处理

Question

我正在开发带有动态html元素的表单。我想提交表单，但html元素名称未预定义。所有字段（HTML控件都是从API提取的。

我可以使用axios获取字段名称和字段初始值。字段数和字段名都是动态的。我还完成了如下的changehandler函数

  onChangeHandler = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

下面是状态定义

  state = {
    datajson: [],
    fieldname: []
  };

其中datajson包含所有数据和字段值。 fieldname包含字段名称。

我想提交表单并在json对象（以下是示例json对象）中获取数据，然后可以使用axios将其发送到数据库以更新记录。

postSubmit=()=>{
fieldname1:this.state.fieldvalue,
fieldname2:this.state.fieldvalue1
fieldname2:this.state.fieldvalue2
}

我已经在类组件中定义了以上所有代码。 如何实现上述方案的表单提交？

Answer 1

您可以将表单值保存为处于状态的对象，然后将其提交到表单发布中。

onChangeHandler = event => {
  const { fields } = this.state;
  fields[name] = event.target.value;
  this.setState({
    fields,
  });
};

状态看起来像这样：

state = {
  datajson: [],
  fieldname: [],
  fields: {},
};

您的提交功能：

postSubmit=()=>{
  // post fields to api.
  const { fields } = this.state;
}

您是否正在寻找类似的东西？