我有一个使用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'))
答案 0 :(得分：6)
要使用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);
});
答案 1 :(得分：1)
您可以像这样访问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>
);
答案 2 :(得分：0)
您可以动态更新状态更改。请参阅示例Here
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
将所有字段绑定到您的州。示例
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>
)}
});
答案 3 :(得分：0)
使用提取
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)
);
}