Este bolígrafo muestra mi problema: http://codepen.io/PiotrBerebecki/pen/RKxOKb
Puedo cambiar el color de fondo cuando se hace clic en el botón, pero me gustaría aplicar un color diferente cuando se mantiene presionado el botón Shift mientras se hace clic. Mi objeto de evento actual no parece tener acceso a los eventos del teclado.
¿Sabrías cómo solucionarlo?
Aquí está el código de reacción:
class App extends React.Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); this.state = { wasOriginalColorChanged: false, buttonColor: 'blue' } } handleClick(e) { let newButtonColor; if (!this.state.wasOriginalColorChanged) { if (e.shifKey) { newButtonColor = 'green'; } else { newButtonColor = 'tomato'; } } else { newButtonColor = 'blue'; } this.setState({ buttonColor: newButtonColor, wasOriginalColorChanged: !this.state.wasOriginalColorChanged }); } render() { return ( <div className="button" onClick={this.handleClick} style={{backgroundColor: this.state.buttonColor}}> <p>Click me to change color to tomato</p> <p>Click me + Shift key to change color to green</p> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') ); .button { color: white; text-align: center; border: solid 5px black; cursor: pointer; user-select: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>Omitiste la 't' en e.shiftKey en la segunda instrucción if