停止來自 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");
    }
  }
}