Want to implement a comfirm dialog that appears before user changes tabs or closes the browser window.
The code below (ch5.8 of book React Quickly) worked to display a confirmation dialog on old browsers but not on Firefox Quantum browser - can someone help:
index.html:
<!DOCTYPE html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <script src="js/react.js"></script> <script src="js/react-dom.js"></script> </head> <body> <div> <div id="content"></div> <script src="js/note.js"></script> <script src="js/script.js"></script> </div> </body> </html> script.jsx:
let secondsLeft = 5 let seconds = secondsLeft.valueOf() let interval = setInterval(()=>{ if (secondsLeft == 0) { ReactDOM.render( <div> Note (object) was removed after {seconds} seconds. </div>, document.getElementById('content') ) clearInterval(interval) } else { ReactDOM.render( <div> <Note secondsLeft={secondsLeft}/> </div>, document.getElementById('content') ) } secondsLeft-- }, 1000) note.jsx:
class Note extends React.Component { confirmLeave(e) { let confirmationMessage = 'Do you really want to close?' e.returnValue = confirmationMessage // Gecko, Trident, Chrome 34+ return confirmationMessage // Gecko, WebKit, Chrome <34 } componentDidMount() { console.log('Attaching confirmLeave event listener for beforeunload') window.addEventListener('beforeunload', this.confirmLeave) } componentWillUnmount() { console.log('Removing confirmLeave event listener for beforeunload') window.removeEventListener('beforeunload', this.confirmLeave) } render() { console.log('Render') return <div>Here will be our input field for notes (parent will remove in {this.props.secondsLeft} seconds)</div> } } 
Top comments (0)