您好我正在尝试将我在表单中输入的值调用到我的fetch功能但是它无法读取它请帮助我...我打算做一个获取帖子,所以我可以将它插入我的表...
我的功能就像
handleSubmit() {
debugger
function createNewProfile(profile) {
const formData = new FormData();
formData.append('Employee_Name', profile.Employee_Name);
formData.append('Address', profile.Address);
formData.append('Department', profile.Department);
return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', {
method: 'POST',
body: formData
}).then(response => response.json())
}
createNewProfile(profile)
.then((json) => {
// handle success
}
).catch(error => error);
}
这是我想要我的
的形式<form onSubmit={this.handleSubmit}>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text"
name="Employee_Name"
className="EmployeeDetails"
value={this.props.Employee_Name}/>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text"
name="Address"
className="EmployeeDetails"
value={this.props.Address}
onChange={this.props.handleChange}/>
</td>
</tr>
<tr>
<td>Department</td>
<td>
<input type="text"
name={this.props.Department}
className="EmployeeDetails"
value={this.props.Department}/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<input type="submit" className="btn btn-info" onClick={ this.handleSubmit} value=" Add Employee"/>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
答案 0 :(得分:0)
您正在控制父组件的表单值,因此我建议您也从父组件传递提交函数,然后单击提交,在父级中执行api调用。
如果你在父组件中进行api调用,那么你需要通过this.state.key
访问这些值,如果你在孩子中进行api调用,那么你需要使用this.props.key
来访问这些值。 / p>
注意:我假设您在更改子组件中的父组件中更改输入值,因为您从父组件传递了onChange函数。
子组件中的Api调用:
handleSubmit(){
let profile = this.props;
const formData = new FormData();
formData.append('Employee_Name', profile.Employee_Name);
formData.append('Address', profile.Address);
formData.append('Department', profile.Department);
fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(response => {
//handle success
})
}
父母组件中的Api调用:
handleSubmit(){
let profile = this.state;
const formData = new FormData();
formData.append('Employee_Name', profile.Employee_Name);
formData.append('Address', profile.Address);
formData.append('Department', profile.Department);
fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail/', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(response => {
//handle success
})
}
<强>更新强>
您需要在构造函数中绑定handleSubmit
函数,编写如下构造函数:
constructor(){
super();
this.state = {};
this.handleSubmit = this.handleSubmit.bind(this)
}