| 1 | import React, {Component} from 'react'; |
| 2 | |
| 3 | import Theme from './Theme'; |
| 4 | import Suspend from './Suspend'; |
| 5 | |
| 6 | import './Page.css'; |
| 7 | |
| 8 | const autofocusedInputs = [ |
| 9 | <input key="0" autoFocus placeholder="Has auto focus" />, |
| 10 | <input key="1" autoFocus placeholder="Has auto focus" />, |
| 11 | ]; |
| 12 | |
| 13 | export default class Page extends Component { |
| 14 | state = {active: false, value: ''}; |
| 15 | handleClick = e => { |
| 16 | this.setState({active: true}); |
| 17 | }; |
| 18 | handleChange = e => { |
| 19 | this.setState({value: e.target.value}); |
| 20 | }; |
| 21 | componentDidMount() { |
| 22 | // Rerender on mount |
| 23 | this.setState({mounted: true}); |
| 24 | } |
| 25 | render() { |
| 26 | const link = ( |
| 27 | <a className="link" onClick={this.handleClick}> |
| 28 | Click Here |
| 29 | </a> |
| 30 | ); |
| 31 | return ( |
| 32 | <div className={this.context + '-box'}> |
| 33 | <Suspend> |
| 34 | <p suppressHydrationWarning={true}> |
| 35 | A random number: {Math.random()} |
| 36 | </p> |
| 37 | <p>Autofocus on page load: {autofocusedInputs}</p> |
| 38 | <p>{!this.state.active ? link : 'Thanks!'}</p> |
| 39 | {this.state.active && <p>Autofocus on update: {autofocusedInputs}</p>} |
| 40 | <p> |
| 41 | Controlled input:{' '} |
| 42 | <input value={this.state.value} onChange={this.handleChange} /> |
| 43 | </p> |
| 44 | </Suspend> |
| 45 | </div> |
| 46 | ); |
| 47 | } |
| 48 | } |
| 49 | Page.contextType = Theme; |