class MyComponent extends React.Component { constructor(props) { super(props); this.state = { message: "" }; this.handleEnter = this.handleEnter.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); } // change code below this line componentDidMount() { document.addEventListener("keydown", this.handleKeyPress); } componentWillUnmount() { document.removeEventListener("keydown", this.handleKeyPress); } // change code above this line handleEnter() { this.setState((state) => ({ message: state.message + 'You pressed the enter key! ' })); } handleKeyPress(event) { if (event.keyCode === 13) { this.handleEnter(); } } render() { return ( <div> <h1>{this.state.message}</h1> </div> ); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter