React JS:区分Click和Click + Shift事件

Question

这支笔显示我的问题:http://codepen.io/PiotrBerebecki/pen/RKxOKb

单击按钮时我可以更改背景颜色但是在单击时按住Shift键时我想应用不同的颜色.我当前的事件对象似乎无法访问键盘事件.

你知道怎么解决吗？

这是React代码:

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>

Answer 1

你e.shiftKey在第二个if语句中省略了't'