我想知道如何仅重新加载表格,而不是整个页面的反应。我尝试过使用
history.go(0);
但是,它会重新加载整个页面,请检查如何重新加载它,如果我要使用 forceUpdate
,根据研究,您应该避免使用它。我正在尝试做一个 AJAX,但我不知道该把什么放在哪里;它与 PHP 有很大不同。
我的代码
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 按钮加上表格本身的代码
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:它也在同一页面..我不知道如何称呼它的原因。
在您的
ajax
通话中,通话成功后获得回复并致电 setState
并收到新回复。
现在将做出反应
re-render
并且您的组件将使用来自 ajax 调用的新数据进行更新。
无需打电话
history.go(0)
。
我假设有一个
TableComponent
可以呈现表格结构。
TableComponent
从 data
组件接收 Test
作为 prop。
一旦通过 ajax 调用获得新数据,该数据就会传递给
TableComponent
并 TableComponent
重新呈现自身。
在这种情况下,不会发生整个页面重新渲染,仅在状态更改的地方发生更改。
以下面的代码片段为例。
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>