React - 事件监听器碰撞

Question

我有一个组件，当您按下 'Enter' 时会显示模态。效果不错。

我想向模式添加键盘交互。一切都很顺利 UNTIL 我选择 'Enter' 作为模式中的确认按钮。

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

听起来不错。但问题是来自组件的 pressed 'enter' 在它的第一个循环中也被我的模态（在 window.addEventListener('keydown', this.onKeyPress); 中）捕获。

所以，它同时启动和隐藏，我无法与之交互。一个建议或解决方法？

提示:

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

此外，我的代码如下所示：

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

Answer 1

event.stopPropagation 应该做这项工作。？看起来反应太快了（捕获组件中的事件正在改变状态）呈现模态。并在呈现后获得在组件中捕获的相同事件（基本上）。实际上它是组件级别的合成事件（原生事件顶部的包装器）

React - 事件监听器碰撞

React - event listeners collision

events

keydown

reactjs