サブミット関数のreactjsでFormDataとしてフォーム値を渡す方法

Question

jsonデータを使用して動的フォームを生成しました。送信時にフォーム入力値を渡す必要があります。私はformdataとして値を送るつもりです。私はsubmit関数を作成しましたが、私はformdataに値を追加する方法を知らず、Axiosを使ってpostメソッドを渡す必要があります。反応するために新しい私は誰も私にこれを行う方法を教えることができます。以下は私のコードです。 axiosを使用してFormDataを投稿する

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

、あなたはそのcontent-typeため、FormDataを送信していることmultipart/form-dataする必要があることをheaderで指定する必要があります。

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

Answer 2

あなたはこのようにいる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> 
    ); 

Answer 3

axiosでFormDataを使用する方法この、

チェック動的に状態への変更を更新することができます。例を参照Here

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は、ユーザー名、名前、またはこれまでに何があなたのコントロールに名前を付けることができます。

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