Question

当您按下'Enter'时，我有一个显示模态的组件。效果很好。

我想将键盘交互添加到模式中。一切都变得很酷直到，我选择了'Enter'作为模式中的确认按钮。

我的问题是什么？当您在组件中时，enter是用于显示模态的键。但是，当您处于模态时，它也是确认键。

听起来不错。但是问题是在第一个循环中，我的模态（在window.addEventListener('keydown', this.onKeyPress);中）也捕获了来自组件的按下的“输入”。

因此，它在同一时刻开始并隐藏，我无法与之交互。一个建议或解决方法吗？

提示：

我尝试在timeOut中添加500毫秒的modal.componentDidMount.addEventListener。但是问题是它与计算机有关，而不是确定性行为。无论如何，我都会保证行为正确。

此外，我的代码如下：

0。 modal.jsx

class Modal extends React.Component {
  //...
  onKeyPress (event) {
    if (event.key === 'Enter') {
      this.props.hideScroll();
    }
  }

  // MY PROBLEM (I think so)
  componentDidMount () {
    window.addEventListener('keydown', this.onKeyPress);
  }

  componentWillUnmount () {
    window.removeEventListener('keydown', this.onKeyPress);
  }

  render () {
    return <div>Cool Modal</div>;
  }
}

1。 component.jsx

class Component extends React.Component {
  //...
  onKeyPress (event) {
    if (event.key === 'Enter') {
      this.setState({
        showModal: true
      });      
    }
  }

  render () {
    let modal = this.state.showModal && <Modal hideScroll={this.hideScroll} />
    return (
      {modal}
      <input onKeyDown={this.onKeyPress}>
    )
  }
}

反应-事件监听器冲突

0 个答案: