Question

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

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

停止从React中的输入传播事件

2 个答案: