2018-05-27 20:47:02 +02:00
|
|
|
import { Component } from 'react'
|
|
|
|
import Link from 'next/link'
|
|
|
|
|
|
|
|
export default class OnClick extends Component {
|
2019-11-11 04:24:53 +01:00
|
|
|
static getInitialProps({ res, query: { count } }) {
|
2018-08-15 21:42:56 +02:00
|
|
|
return { count: count ? parseInt(count) : 0 }
|
|
|
|
}
|
2018-05-27 20:47:02 +02:00
|
|
|
|
2018-08-15 21:42:56 +02:00
|
|
|
state = {
|
2019-11-11 04:24:53 +01:00
|
|
|
stateCounter: 0,
|
2018-05-27 20:47:02 +02:00
|
|
|
}
|
|
|
|
|
2019-11-11 04:24:53 +01:00
|
|
|
render() {
|
2019-02-19 22:45:07 +01:00
|
|
|
const { stateCounter } = this.state
|
|
|
|
const { count } = this.props
|
2018-05-27 20:47:02 +02:00
|
|
|
return (
|
2019-11-11 04:24:53 +01:00
|
|
|
<div id="on-click-page">
|
2018-08-15 21:42:56 +02:00
|
|
|
<Link href={`/nav/on-click?count=${count + 1}`} replace>
|
2019-05-30 03:19:32 +02:00
|
|
|
<a
|
2019-11-11 04:24:53 +01:00
|
|
|
id="on-click-link"
|
2019-05-30 03:19:32 +02:00
|
|
|
onClick={() => this.setState({ stateCounter: stateCounter + 1 })}
|
|
|
|
>
|
|
|
|
Self Reload
|
|
|
|
</a>
|
2018-05-27 20:47:02 +02:00
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<Link href="/nav/on-click">
|
2019-05-30 03:19:32 +02:00
|
|
|
<a
|
2019-11-11 04:24:53 +01:00
|
|
|
id="on-click-link-prevent-default"
|
2019-05-30 03:19:32 +02:00
|
|
|
onClick={e => {
|
|
|
|
e.preventDefault()
|
|
|
|
this.setState({ stateCounter: stateCounter + 1 })
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Self Reload
|
|
|
|
</a>
|
2018-05-27 20:47:02 +02:00
|
|
|
</Link>
|
2019-11-11 04:24:53 +01:00
|
|
|
<p id="query-count">QUERY COUNT: {count}</p>
|
|
|
|
<p id="state-count">STATE COUNT: {stateCounter}</p>
|
2018-05-27 20:47:02 +02:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|