removeEventListener 無法按預期工作

Question

應用和刪除事件偵聽器時，我產生了不良影響。

我在網上找到了相關的問題。 我試圖應用我發現的東西，但我仍然遇到同樣的問題。 然后我發現了這個： https://dev.to/marcosteng/how-to-really-remove-eventlisteners-in-react-3och

我不知道是否可以這樣。 但我可能認為這是一個類似的問題。 其實不知道。 讓我向您展示我的代碼：

組件.ts

clearDateValue(listener: boolean): void {
    const handleKeyEvent = (event: KeyboardEvent) => {
      if (event.key !== 'Backspace')
        return;
      this.taskFormSetValue('date', null);
    };

    if (listener) {
      document.querySelector('.cdk-overlay-container').addEventListener('keyup', handleKeyEvent);
    } else {
      document.querySelector('.cdk-overlay-container').removeEventListener('keyup', handleKeyEvent);
    }
  }

組件.html

<mat-form-field appearance="outline">
    <input #date formControlName="date" matInput [min]="minDate" [matDatepicker]="picker" (dateChange)="taskFormSetValue('date', $event.value)" class="d-none">
    <mat-datepicker-toggle matSuffix [for]="picker">
        <fa-icon *ngIf="!date.value" [icon]="dateIcon" matDatepickerToggleIcon></fa-icon>
        <span *ngIf="date.value" matDatepickerToggleIcon class="dateTextToggle font-size-12">
            {{ date.value | date:'dd MMM' }}
        </span>
    </mat-datepicker-toggle>
    <!-- THIS IS THE IMPORTANT SECTION OF THE CODE IN WHICH I IMPLEMENTED clearDateValue(listener) -->
    <mat-datepicker #picker (opened)="clearDateValue(true)" (closed)="clearDateValue(false)"></mat-datepicker>
</mat-form-field>

我在控制台中登錄了toggler ，它按預期工作。 在 Datepicker 關閉時，切換器為 false，因此它應該刪除偵聽器。 不幸的是，這無濟於事。 我認為問題出在 removeEventListener() 方法中。 我不知道它是否因為組件被刷新而沒有刪除事件監聽器。 但是在下面的視頻中，您可以看到當我單擊兩個日期選擇器（並激活 addEventListener 方法）然后單擊“刪除”鍵時會發生什么。 當它應該只刪除最新的值時，它會刪除這兩個值： https://drive.google.com/file/d/1oDIK1nVCAFiiFly_Qv6RoPZi4Z6_sAhj/view

Answer 1

每次調用方法時，都會在代碼中創建一個新的 handleKeyEvent function。 在方法之外修復那個地方的監聽器代碼，如下所示：

handleKeyEvent = (event: KeyboardEvent) => {
      if (event.key !== 'Backspace')
        return;
      this.taskFormSetValue('date', null);
    };
clearDateValue(listener: boolean): void {
    if (listener) {
      document.querySelector('.cdk-overlay-container').addEventListener('keyup', this.handleKeyEvent);
    } else {
      document.querySelector('.cdk-overlay-container').removeEventListener('keyup', this.handleKeyEvent);
    }
  }