如何在单击reactjs时重新加载表 [英] How to reloads the table when clicked reactjs
问题描述
我想知道如何重新加载表格，而不是整个页面的反应。我已经尝试过使用 history.go（0）; 然而，重新加载整个页面请检查我如何重新加载它，如果我打算使用forceUpdate，基于研究你应该避免使用它。我试着做一个AJAX，但我不知道该把它放在哪里...它与php有所不同..
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..
我的onclick代码
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);
})
}
这是onclick按钮的代码再加上表本身
this is the code for the onclick button plus the table itself
render() {
const isEnabled = this.canBeSubmitted();
let {jsonReturnedValue} = this.state;
return(
<div>
<div className="container">
<h1> Listof Employees </h1>
<button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
<table className= "table table-bordered" id="result">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Update</th>
<th>Delete</th>
</tr>
{jsonReturnedValue.map((d,i) => this.renderItem(d,i))}
</tbody>
</table>
</div>
{/*Updating*/}
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">ADD Employee</h4>
</div>
<form>
<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：它也在同一页面......我不知道怎么称呼它的原因
PS: IT IS ALSO IN THE SAME PAGE.. the reason i dont know how will I call it
推荐答案
在您的 ajax 电话中，您的电话成功后获取响应并调用 setState 收到新回复。
In your ajax call, after your call is successful get the response and call setState with new response received.
现在反应将重新呈现并且您的组件将使用来自ajax调用的新数据进行更新。
Now react will re-render and your component will be updated with new data from ajax call.
无需调用 history.go（ 0）。
我假设有一个 TableComponent ，它会呈现表格结构体。
TableComponent 从测试 prop 接收组件。 数据
I have assumed that there is a TableComponent which renders the table structure.
TableComponent receives data as prop from Test component.
只要通过ajax调用获得新数据，该数据就会传递给 TableComponent 和 TableComponent 重新渲染自身。
As soon as new data available via ajax call, that data is passed to TableComponent and TableComponent re-renders itself.
在这种情况下不会发生整页重新渲染，只有在状态发生变化时才会发生变化。
Whole page re-rendering will not occur in this case only changes occur where states were changed.
以下面的代码片段为例。
Check the below code snippet as an example.
class Test extends React.Component {
constructor(){
super();
this.state = {
data:[]
};
}
handleChange = (event, name) => {
// set state here
}
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) {
this.setState({data:result}); // <--------
// as soon as you will call setState rerender will occur
})
.catch(function(error) {
console.log(error);
})
}
render() {
return (
<div>
<form>
<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>
// your table component or jsx goes here
// render your table based on state -- data
<TableComponent data={this.state.data} />
</div>
);
}
}
ReactDOM.render( <Test /> ,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
这篇关于如何在单击reactjs时重新加载表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
