Как передать значения формы как FormData в reactjs при отправке функции

У меня есть динамическая форма, созданная с использованием данных json, и мне нужно передать входные значения формы при отправке. Я планирую отправить значения как данные формы. Я создал функцию отправки, но я не знаю, как добавить значения в данные формы, и мне нужно пройти через метод отправки с помощью Axios. Я новичок в реакции, может ли кто-нибудь сказать мне, как это сделать. Ниже мой код.

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'))

reactjs forms dynamic axios
person knbibin    schedule 29.03.2017    source источник

Ответы (4)


arrow_upward
32
arrow_downward

Чтобы опубликовать 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);
    });
person Mayank Shukla    schedule 29.03.2017
comment
Спасибо за помощь. Я отредактировал вопрос с вашим обновленным кодом. Я хочу передать входные значения в качестве второго параметра в formdata, чтобы я мог видеть метку и соответствующее значение в formdata. Я попробовал, но не могу решить эту проблему. - person knbibin; 29.03.2017

arrow_upward
10
arrow_downward

Вы можете получить доступ к FormData следующим образом:

handleSubmit(event) {
    // Prevent default behavior
    event.preventDefault();

    const data = new FormData(event.target);
    // Access FormData fields with `data.get(fieldName)`
    // For example, converting to upper case
    data.set('username', data.get('username').toUpperCase());

    // Do your Axios stuff here
}

Это код формы:

render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />
        <button>Send data!</button>
      </form>
    );
person Khang Lu    schedule 29.03.2017

arrow_upward
0
arrow_downward

Вы можете динамически обновлять свои изменения вашего состояния. См. Пример здесь

constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

привяжите все свои поля к своему состоянию. Exampkle

this.sate = { name: '', username: '', select: '' }

а потом

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

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



      </div>
    }
  }

примечание group.name может быть именем пользователя, именем или любым другим именем для вашего элемента управления.

handleUsernameChange(event) {
    this.setState({username: event.target.value});
  }

handleDropDownChange(event) {
    this.setState({select: event.target.value});
  }

а затем при публикации

axios.post(url, this.state, 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 onSubmit={this.handleSubmit}>
      <div className="form-group">
      <div className="col-xs-5">


      {this.renderForm()}


             <input type="submit" value="Submit" />
      </div>
      </div>
      </form>
      </div>      
      </div>
      </div>
      )}
  });

Посмотрите документ здесь https://facebook.github.io/react/docs/forms.html

person Nuru Salihu    schedule 29.03.2017

arrow_upward
0
arrow_downward

Использование выборки


function uploadFile(file) {
  fetch('https://path/to/api', {
    // content-type header should not be specified!
    method: 'POST',
    body: file,
  })
    .then(response => response.json())
    .then(success => {
      // Do something with the successful response
    })
    .catch(error => console.log(error)
  );
}
person BUND-X    schedule 18.06.2021