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)