如何在Submit函数上的React.js中将表单值作为FormData传递

Question

我有一个使用json数据生成的动态表单，我需要在提交时传递表单输入值。我打算将值作为formdata发送。我已经创建了Submit函数，但是我不知道如何在formdata中追加值，并且需要使用Axios通过post方法。我是新来的反应者，谁能告诉我该怎么做。下面是我的代码。

var DATA = {
  "indexList": [{
    "Label": "Name",
    "Type": "text",
    "Regex": "",
    "Default_Val": "",
    "Values": {
      "Key": "",
      "Value": ""
    },
    "Validtion Msg": "",
    "Script": "",
    "Mandatory": "Y",
    "maxLength":"16",
    "minLength":"7",
    "format":"Alphanumeric",
    "cssClassName": "form-control",
    "Placeholder": ""
  },
  {
    "Label": "Select Language",
    "Type": "dropdown",
    "Regex": "",
    "Default_Val": "English",
    "Values": [{
      "Key": "option1",
      "Value": "English"
    },{
      "Key": "option2",
      "Value": "Spanish"
    }],
    "Validtion Msg": "",
    "Script": "",
    "Mandatory": "Y",
    "maxLength":"",
    "minLength":"",
    "format":"",
    "cssClassName": "form-control",
    "Placeholder": ""
  },

  {
    "Label": "Type",
    "Type": "radio",
    "Regex": "",
    "Default_Val": "",
    "Values": [{
      "Key": "option1",
      "Value": "Form1"
    }, {
      "Key": "option2",
      "Value": "Form2"
    }, {
      "Key": "option3",
      "Value": "Form3"
    },{
      "Key": "option4",
      "Value": "Form4"
    },{
      "Key": "option5",
      "Value": "Form5"
    }],
    "Validtion Msg": "",
    "Script": "",
    "Mandatory": "Y",
    "maxLength":"",
    "minLength":"",
    "format":"",
    "cssClassName": "form-control",
    "Placeholder": ""
  }
  ]
};

var Menu = React.createClass({

  getInitialState() {
    return {

    }
  },

  _renderElement: function(group){
    switch(group.Type){
      case 'text':
      return <input className={group.cssClassName} 
      id={group.Label} 
      placeholder={group.Placeholder}
      required={group.Mandatory == 'Y'? true:   false}/>

      case 'dropdown':
      return <select className={group.cssClassName}>
      <option value="">{group.Placeholder} </option>
      {group.Values.map(el => <option>{el.Value}</option>)}
      </select>


      case 'radio':
      return <div className={group.Type}>
      <div for="let value of group.Values">
      {group.Values.map(el=> <label><input
        name="radios"/>{el.Value}</label>)}
      </div>
      </div>
    }
  },

  renderForm: function () {

    var data = DATA.indexList;
    return data.map(group =>{
      return <div>
      <label for={group.Label}>{group.Label}</label>
      <div>
      {
       this._renderElement(group)
     }
     </div>
     </div>
   });
  },


    _onSubmit: function () {
    let formData = new FormData();
    var data1 = DATA.indexList;
    data1.map(group =>{
        formData.append(group.Label,);//How to get the input value here as a second parameter, so than i can pass the label name and corresponding value to form data.
    });

    const config = {     
        headers: { 'content-type': 'multipart/form-data' }
    }

    Axios.post('',formData, config)
        .then(response => {
                console.log(response);
        })
        .catch(error => {
            console.log(error);
        });

  },

  render: function() {
    return (    
      <div className="container">
      <br/>
      <div className="panel panel-primary">
      <div className="panel-heading">Form</div>
      <div className="panel-body">
      <form>
      <div className="form-group">
      <div className="col-xs-5">


      {this.renderForm()}
      <button type="submit" className="btn btn-primary" onSubmit={this._onSubmit()}>Submit</button>
      </div>
      </div>
      </form>
      </div>      
      </div>
      </div>
      )}
  });

ReactDOM.render(<Menu/>, document.getElementById('app'))

Answer 1

要发布FormData使用情况axios，您需要指定header要发送的内容FormData，因为content- type应该是multipart/form-data。

勾选此，如何使用FormData与axios：

let formData = new FormData();    //formdata object

formData.append('name', 'ABC');   //append the values with key, value pair
formData.append('age', 20);

const config = {     
    headers: { 'content-type': 'multipart/form-data' }
}

axios.post(url, formData, config)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });