class Hello extends React.Component { onClickDemo() { console.log('clicked'); }; onKeyDownDemo(event) { if (event.key === 'Enter') { console.log('enter key pressed on keydown of div'); } } render() { return ( <div> <div role="button" tabIndex="0" onClick={this.onClickDemo} onKeyDown={this.onKeyDownDemo} className="fakeButtonStyle">Fake Button</div> <button onClick={this.onClickDemo} className="realButtonStyle">Real Button</button> </div> ); } } ReactDOM.render( <Hello name="World" />, document.getElementById('container') );
.fakeButtonStyle { background-color: #1976d2; color: #fff; width: 125px; height: 25px; font-size: 20px; line-height: 25px; padding: 10px; text-align: center; border-radius: 5px; margin-bottom: 20px; } .fakeButtonStyle:hover { cursor: default; } .fakeButtonStyle:hover, .realButtonStyle:hover { background-color: rgb(17, 82, 147); } .realButtonStyle { background-color: #1976d2; color: #fff; width: 125px; min-height: 25px; font-size: 20px; padding: 10px; border-radius: 5px; }