单击reactjs时如何重新加载表格
Posted
技术标签:
【中文标题】单击reactjs时如何重新加载表格【英文标题】:How to reloads the table when clicked reactjs 【发布时间】:2017-10-22 20:02:15 【问题描述】:我想知道如何只重新加载表格,而不是整个页面的反应。我试过使用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:它也在同一页中..我不知道我该怎么称呼它的原因
【问题讨论】:
也添加你的 reactjs 代码 我试图做 ajax 但我不知道怎么做 :( 【参考方案1】:在您的ajax
呼叫中,在您的呼叫成功后获取响应并在收到新响应的情况下呼叫setState
。
现在反应将re-render
并且您的组件将使用来自 ajax 调用的新数据进行更新。
无需致电history.go(0)
。
我假设有一个TableComponent
呈现表结构。
TableComponent
从Test
组件接收data
作为prop。
一旦通过 ajax 调用获得新数据,该数据就会传递给 TableComponent
并且 TableComponent
会重新呈现自身。
在这种情况下不会发生整个页面的重新渲染,只会在状态发生变化的地方发生变化。
以下面的代码 sn-p 为例。
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>
【讨论】:
我很困惑 this.countLines(); 是做什么的做什么? @P.Macs 上面的代码 sn-p 将不会运行,因为它取决于您的获取请求,并且 TableComponent 尚未添加。我刚刚给你提供了一个例子。 我尝试更新我的问题,希望对您有所帮助.. 我也尝试添加您建议的答案,但最终还是做了同样的事情 :( 我不知道我在做什么.. 抱歉 在组件中获取新数据后是否调用 setState? .then(function (result) this.setState( jsonReturnedValue: results ); )以上是关于单击reactjs时如何重新加载表格的主要内容,如果未能解决你的问题,请参考以下文章
ReactJS/Apollo/Graphql:使用 @skip 阻止 data.refetch 直到单击 onSubmit 但重新获取仍然可用