web-dev-qa-db-ja.com

送信関数のreactjsでFormDataとしてフォーム値を渡す方法

Jsonデータを使用して生成された動的フォームがあり、送信時にフォーム入力値を渡す必要があります。値をformdataとして送信する予定です。私は送信関数を作成しましたが、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'))
formsreactjsdynamicaxios
6
knbibin

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);
    });
12
Mayank Shukla

次のように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>
    );
5
Khang Lu

状態の変更を動的に更新できます。例を見る ここ

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

0
Nuru Salihu