This pen shows my problem: http://codepen.io/PiotrBerebecki/pen/RKxOKb
I'm able to change the background color when the button is clicked but I would like to apply a different color when the Shift button is held while clicking. My current event object does not seem to have access to the keyboard events.
Would you know how to fix it?
Here is the React code:
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>You left out the 't' in e.shiftKey in the second if statement