web-dev-qa-db-fra.com

Comment passer des valeurs de formulaire en tant que FormData dans reactjs sur la fonction de soumission

J'ai un formulaire dynamique généré à l'aide de données json et je dois transmettre les valeurs d'entrée du formulaire lors de la soumission. Je prévois d'envoyer les valeurs sous forme de données de formulaire. J'ai créé une fonction de soumission, mais je ne sais pas comment ajouter les valeurs dans formdata et j'ai besoin de passer par la méthode de publication à l'aide d'Axios. Je suis nouveau pour réagir. Quelqu'un peut-il me dire comment procéder? Voici mon code.

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'))
formsreactjsdynamicaxios
6
knbibin

Pour publier le FormData à l'aide de axios, vous devez spécifier dans header que vous envoyez FormData, pour cela content-type devrait être multipart/form-data.

Vérifiez ceci, comment utiliser FormData avec 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);
    });
12
Mayank Shukla

Vous pouvez accéder à FormData comme ceci:

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
}

Voici le code du formulaire:

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

Vous pouvez mettre à jour vos modifications de votre état dynamiquement. Voir l'exemple ici

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

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

liez tous vos domaines à votre état. Exampkle

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

puis

_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>
    }
  }

note group.name peut être nom d'utilisateur, nom ou ce que vous nommez votre contrôle.

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

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

puis lors de la publication

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

N'oubliez pas de mettre à jour votre rendu en

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>
      )}
  });

Jetez un œil à la doc ici https://facebook.github.io/react/docs/forms.html

0
Nuru Salihu