keydown 時多次觸發 keydown (reactjs)

Question

我正在添加一個事件偵聽器並檢查它是否為 1 級，但是當我按一次空格鍵時，它會觸發 50 次或更多次。 請幫忙

 document.addEventListener("keyup", function(e) { if(level === 1){ if(e.code === "Space") { console.log('space press'); click1(); } } });

Answer 1

由於這是用 React 標記的，鑒於您在此處擁有的代碼和您描述的問題，幾乎可以肯定您在每次渲染時都綁定了一個事件偵聽器。 這意味着您最終會遇到比您想要的更多的聽眾。 你需要做的是在你使用 React的時候使用 React。

例如下面，我們有一個記錄任何按鍵的輸入，我們還手動創建一個事件監聽器。 首先，當您鍵入時，您將獲得每個日志。 但是，一旦您單擊按鈕（觸發重新渲染），您將開始收到多個“手動”事件，但仍然是單個“反應”事件：

 class Hello extends React.Component { constructor(props) { super(props); this.state = { count: props.count }; } inc() { this.setState(prev => ({count: prev.count+1})); } render() { document.addEventListener("keyup", function(e) { console.log('manual space press'); }); return <div onKeyUp={(e) => { console.log('React: space press'); }}> <button onClick={() => this.inc()}>{this.state.count}</button> <input /> </div> } } ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id='root'></div>

Answer 2

這就是所謂的Event Bubbling ，它基本上意味着事件在每個父元素上觸發一次，直到達到HTML 。

你可以在這里了解它： https://dev.to/eladtzemach/event-capturing-and-bubbling-in-react-2ffg#:~:text=Event%20Bubbling%20and%20Capturing%20in%20React&text=Bubbling% 20is%20as%20straightforward%20as,our%20example%20in%20the%20beginning 。

您可以阻止默認行為，但如果您沒有禁用它的特定用途，通常最好保留它。

從代碼片段中，我不明白為什么這被標記為 react 但你的問題的另一個原因是你可能將這段代碼放在你的render() function 或任何react life cycle function 內，這導致了這個片段在每次重新渲染時運行都會給您帶來大量不需要的聽眾，這不僅是您不想要的功能，而且還會減慢您的應用程序超時時間，即。 直到用戶刷新頁面。

Answer 3

useEffect(() => {
    const handleEscape = (event) => {
        if (event.keyCode === 27) {
            console.log('Hello')
        }
    };
    window.addEventListener('keydown', handleEscape);

    return () => {
        window.removeEventListener('keydown', handleEscape);
    };
}, []);