停止来自 React 输入的事件传播

Question

我有两个 React 组件。 一个有一个window.onkeyup侦听器，例如当按下空格时它会执行一个动作。 另一个具有用于编辑文本属性的输入元素。 但是，当在第二个组件中编辑文本时，也会在第一个组件中触发keyevent 。 我试过添加：

event.stopPropagation()
event.preventDefault()
event.nativeEvent.stopImmediatePropagation()

在事件处理程序中，但这些似乎都没有停止事件。

我做了一个代码示例，在这种情况下，我不希望在输入时触发window.onkeyup事件。 有没有办法解决这个问题？

 class Hello extends React.Component { componentDidMount() { window.onkeyup = () => console.log("hello") } handleChange(event) { event.preventDefault() event.nativeEvent.stopImmediatePropagation() } render() { return <div onChange={this.handleChange}><input ></input></div> } } ReactDOM.render( <Hello name="World" />, document.getElementById('container') );

 <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="container"></div>

Answer 1

您想改用onKeyUp事件，并使用event.stopPropagation 。

 class Hello extends React.Component { componentDidMount() { window.onkeyup = () => console.log("hello"); } handleKeyUp(event) { event.stopPropagation(); } render() { return <div onKeyUp={this.handleKeyUp}><input /></div>; } } ReactDOM.render(<Hello name="World" />, document.getElementById("container"));

 <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="container"></div>

Answer 2

类似情况的解决方案，我在空格按钮上附加了一个事件侦听器，输入元素位于同一页面上：

在事件侦听器中，如果焦点位于输入元素上，则return ：

const listener = (e) => {
  if (e.target.tagName === "INPUT" || e.target.tagName === "BUTTON"){
    return
  } else {
    if(e.key === " "){
      console.log("Do something");
    }
  }
}