重新加载 react-table 事件
Reload react-table on event
我使用 React 作为我的数据显示工具,并结合 framework react-table 列出我的数据。
我有一个字段可以在我的数据库中创建一个新对象,但我无法在不离开视图的情况下重新加载 table。
我的问题,如何重用加载数据的函数? (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 });
}
我使用 React 作为我的数据显示工具,并结合 framework react-table 列出我的数据。
我有一个字段可以在我的数据库中创建一个新对象,但我无法在不离开视图的情况下重新加载 table。
我的问题,如何重用加载数据的函数? (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 });
}