javascript - 我应该在哪里保存按键的变量？

Question

我有一个带有调整大小组件的 React 应用程序。我想在按下 Shift 键时保持高度 x 宽度比率。我应该在哪里保存 isShiftPressed 值。我可以将其保存到 window 对象(window.isShiftPressed = false)，还是有更好的方法？或者因为我正在使用 React，我应该将其保存到某个组件并通过 props 提供此信息吗？

Answer 1

根本不需要保存类次状态。有些键也会传递给鼠标事件。

请参阅此示例:

const statusElm = document.querySelector( '.shift-status' );
document.addEventListener( 'mousemove', ( e ) => {
  statusElm.innerText = e.shiftKey ? 'yes' : 'no';
} );

<p>Move mouse around to update shift status.</p>
<p>Shift pressed? <span class="shift-status">no</span></p>

如果您确实想保存 Shift 键的状态，请将当前的 React 组件转换为类，以便它可以保存状态。

通过以下解决方案，Shift 键始终是最新的(但 iframe 需要具有焦点才能工作)。

class Wrapper extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      shiftPressed: false,
      mousePos: [ 0, 0 ],
    };
    
    this.updateShiftState = this.updateShiftState.bind(this);
    this.updateMouseMovement = this.updateMouseMovement.bind(this);
  }

  componentDidMount() {
    document.addEventListener( 'keydown', this.updateShiftState );
    document.addEventListener( 'keyup', this.updateShiftState );
    document.addEventListener( 'mousemove', this.updateMouseMovement );
  }
  
  componentWillUnMount() {
    document.removeEventListener( 'keydown', this.updateShiftState );
    document.removeEventListener( 'keyup', this.updateShiftState );
    document.removeEventListener( 'mousemove', this.updateMouseMovement );
  }
  
  updateShiftState( e ) {
    this.setState( {
      shiftPressed: e.shiftKey,
    } );
  }
  
  updateMouseMovement( e ) {
    this.setState( {
      shiftPressed: e.shiftKey,
      mousePos: [ ( e.screenX || e.clientX ), ( e.screenY || e.clientY ) ],
    } );
  }

  render() {
    return (
      <div className="Wrapper">
        Shift pressed: { this.state.shiftPressed ? 'yes' : 'no' }<br />
        Mouse pos: { JSON.stringify( this.state.mousePos ) }
      </div>
    )
  }
}

ReactDOM.render( <Wrapper />, document.getElementById( 'app' ) );

<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>