Question

我有一个带有resize组件的React应用程序。当按下shift键时，我想保持高度x宽度比。我应该在哪里保存isShiftPressed值。我可以将其保存到window对象（window.isShiftPressed = false），还是有更好的方法？或者因为我使用React应该将它保存到某个组件并使用props提供此信息吗？

Answer 1

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

见这个例子：

operator,

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

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

使用以下解决方案，Shift键始终是最新的（iframe需要有焦点才能工作）。

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

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' ) );

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

1 个答案: