I was wondering how will I reload only the table, not the whole page on reacts. I've tried using history.go(0); however, it reloads the whole page please check how can I reload it, if I was going to use forceUpdate, based on research you should avoid using it. Im trying do an AJAX but i dont know what to put where to put it... it is way different than php..
my code for the onclick
handleSubmit( name, address,department){
const laman = {
'Employee_Name': name,
'Address': address,
'Department': department
}
return fetch('http://localhost:5118/api/employeedetails/PostEmployeeDetail?', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(laman)
})
.then(function(response) {
console.log(response)
return response.json();
})
.then(function (result) {
history.go(0);
})
.catch(function(error) {
console.log(error);
})
}
this is the code for the onclick button
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td>
<input type="text"
ref="Employee_Name"
onChange={(e) => this.handleChange(e, "Employee_Name")}
required
/>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text"
ref="Address"
onChange={(e) => this.handleChange(e, "Address")}
required
/>
</td>
</tr>
<tr>
<td>Department</td>
<td>
<input type="text"
onChange={(e) => this.handleChange(e, "Department")}
required
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<input type="button" className="btn btn-info"disabled={!isEnabled}
onClick = { this.handleSubmit.bind(
this, this.state.Employee_Name,
this.state.Address,
this.state.Department)
}
value =" Add Employee"
data-dismiss="modal"/>
<button type="button" className="btn btn-default" data-dismiss="modal" >Close</button>
</div>
</form>
PS: IT IS ALSO IN THE SAME PAGE.. the reason i dont know how will I call it
Aucun commentaire:
Enregistrer un commentaire