This pen shows my problem:

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=".1.0/react.min.js"></script>
<script src=".1.0/react-dom.min.js"></script>
<div id="app"></div>

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

• javascript
• html
• css
• reactjs
• events

• 1 Please don't edit your answer with the correction, else is invalidates your question. – Evan Trimboli Commented Jan 31, 2017 at 0:57

1 Answer 1

You left out the 't' in e.shiftKey in the second if statement