我使用 React 作为数据的显示工具,并结合 framework react-table列出我的数据。
我有一个字段可以在我的数据库中创建新对象,但我无法在不离开 View 的情况下重新加载表。
我的问题,如何重用该函数来加载数据? (source code)
class ElementCRDN extends React.Component {
constructor(props) {
super(props);
this.handleCreation = this.handleCreation.bind(this);
this.handleInput = this.handleInput.bind(this);
this.state = {
data: [], // the data retrieved from the server
pages: -1,
};
}
handleCreation(event) {
Axios.post('/createElement', {
// data
}).then(() => {
// Ask for reload
});
event.preventDefault();
}
render() {
<form onSubmit={this.handleCreation}>
// input to create object
</form>
<ReactTable
data={this.state.data}
pages={this.state.pages}
loading={this.state.loading}
manual
columns={columns}
onFetchData={(state) => { // function to retrieve the data
this.setState({ loading: true });
Axios.post('/listElements', {
page: state.page,
pageSize: state.pageSize,
sorted: state.sorted,
filtered: state.filtered,
}).then((res) => {
this.setState({
data: res.data,
loading: false,
});
});
}}
/>
}
感谢您的阅读
最佳答案
成功创建后,我只需将元素添加到您的数据中即可。您可以再次使用 this.setState
以及通过 createElement
发布的新数据值。
async handleCreation(event) {
this.setState({ loading: true });
await Axios.post('/createElement', data);
this.setState({ data: this.state.data.concat(data), loading: false });
}
关于node.js - 在事件上重新加载 react 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50218489/