I have a modal page popping up when the user clicks a button, it's working perfectly :
render() {
return (
<div>
<section>
<button onClick={() => this.refs.simpleDialog.show()}>Open Modal</button>
</section>
<SkyLight hideOnOverlayClicked ref="simpleDialog" title="Test Modal">
Text that appears inside the modal page
<Button onClick={() => this.refs.simpleDialog.hide()} >Got It</Button>
</SkyLight>
</div>
)}
But My goal is to open the modal automatically when the user opens the page for the first time.
I don't want to open the modal page by clicking on a button
Question :
Can I use an IIFE (An immediately-invoked function expression) in order to open the modal as soon as the user open the page ?
My approach was to set a boolean to true. Then open the modal if the value is set to true
Library being used for the modal : https://github.com/marcio/react-skylight
I think what you're looking for is the componentDidMount() lifecycle method:
componentDidMount() {
this.refs.simpleDialog.show();
}
From the React docs :
componentDidMount()
is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.
Feel free to checkout other component lifecycle methods .
要在组件装载上打开模型,只需将isVisible设置为true即可
<SkyLight isVisible={true} ref="simpleDialog" title="Test Modal">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.