[英]How do i make my reusable react component saves when the user clicks button?
My component this.props.save();
我的组件
this.props.save();
when componentWillUnmount
? 什么时候
componentWillUnmount
? however if i leave the page to an external link in a different tab it does not trigger componentWillUnmount
但是,如果我将页面留在其他选项卡中的外部链接,则不会触发
componentWillUnmount
my component 我的组件
export default class AutoSave extends React.Component { constructor(props) { super(props); this.setIntervalId = null; } componentDidMount() { if (!window.onbeforeunload) { window.onbeforeunload = () => { this.props.save(); }; } this.setIntervalId = setInterval(() => this.props.save(), this.props.intervalInMs); } componentWillUnmount() { this.props.save(); clearInterval(this.setIntervalId); } render() { return <span className="saving">Last saved at {now()}</span>; } }
My link looks like this 我的链接看起来像这样
<Link href="http://www.google.com" target="_blank">
Google Link
</Link>
How can I make component save when user clicks link? 用户单击链接时如何保存组件? It's a react/redux app.
这是一个react / redux应用程序。
Why are you doing some kind of job in a class that extends from "React.Component". 为什么要在从“ React.Component”扩展的类中进行某种工作。 In ReactJS Component is not meant for to do jobs like that.
在ReactJS中,组件并不意味着要做这样的工作。 From official documentation "Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.".There is no part in your component except the span that is related to ui.
摘自官方文档“使用组件,您可以将UI分成独立的,可重用的部分,并分别考虑每个部分。”。除了与ui相关的跨度之外,组件中没有其他部分。 Anyway you should create AutoSave as Pure Component and use it in all React Components.
无论如何,您应该将AutoSave创建为Pure Component并在所有React组件中使用它。 :
:
export default class AutoSave
{
constructor(saveFn, intervalInMs) {
this.saveFn = saveFn;
this.setIntervalId = setInterval(
() => {
this.save();
},
intervalInMs
);
}
unmount() {
this.save();
clearInterval(this.setIntervalId);
}
save() {
this.saveFn();
this.callOnSaveCallback();
}
onSave(callback) {
this.onSaveCallback = callback;
}
// private method that calls onSaveCallback
callOnSaveCallback() {
if(this.onSaveCallback != null)
this.onSaveCallback();
}
}
And use it in my React Components like this : 并在我的React组件中像这样使用它:
import AutoSave from './AutoSave';
export default class ReactComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
// ... other properties
"lastSave": new Date()
}
this.save = this.save.bind(this);
this.autoSave = new AutoSave(this.save, 100);
this.autoSave.onSave(
() => {
this.setState(
{
"lastSave": new Date()
}
);
}
)
}
componentWillUnmount() {
this.autoSave.unmount();
this.autoSave = null;
}
onClick() {
this.autoSave.save();
}
save() {
// some saving job
}
render() {
return (
<div>
// ... other components
<Link href="http://www.google.com" target="_blank" onClick={this.onClick.bind(this)}>
Google Link
</Link>
<span className="saving">Last saved at {this.state.lastSave}</span>
</div>
);
}
}
Opening a new tab will not trigger componentWillUnmount() nor onbeforeunload. 打开新选项卡将不会触发componentWillUnmount()或onbeforeunload。 In both cases because your app is still open in the original tab.
在这两种情况下,因为您的应用仍在原始选项卡中打开。 React does not unmount components immediately before you close or navigate away from the page, so componentWillUnmount() would do nothing even if the page were to close.
在关闭页面或离开页面之前,React不会立即卸载组件,因此,即使页面关闭,componentWillUnmount()也不起作用。 onbeforeunload only triggers when you navigate away from the page in the same tab, or close the tab/window.
仅当您离开同一标签页中的页面或关闭标签页/窗口时,onbeforeunload才会触发。
If you want to reliably call this.props.save() every time the user clicks your button, then simply add an onClick handler to the button. 如果您希望每次用户单击按钮时都可靠地调用this.props.save(),则只需在按钮上添加onClick处理程序即可。
render() {
return <span onClick={this.props.save} className="saving">Last saved at {now()}</span>;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.