ค้นหาเว็บไซต์

reactjs - TS2339: ไม่มีคุณสมบัติ 'closest' ในประเภท 'EventTarget' - ทำอย่างไรฉันถึงจะได้ event.target แบบ native ใน React?


ฉันกำลังพยายามสร้าง callback ของ event listener ที่ตรวจสอบว่ามันถูกเรียกจากที่ไหน คล้ายกับนี้:

import { TouchEvent } from 'react'

const isInvokedFromInsideContainer = (event: TouchEvent<HTMLElement>) => {
  parentContainer = event.target.closest('#container')
  console.log('isInvokedFromInsideContainer: ' + !!parentContainer)
}

แต่ฉันได้รับ

TS2339: คุณสมบัติ 'closest' ไม่มีอยู่ในประเภท 'EventTarget'

event.nativeEvent.target.closest ก็ไม่ทำงานเช่นกัน
event.currentTarget.closest ทำงาน แต่ชัดเจนว่าฉันไม่ต้องการแบบนั้น

การแปลง target เป็น HTMLElement ใช้งานได้:

const target = (event.target as HTMLElement)
const parentContainer = target.closest('#container')

วิธีที่ถูกต้องในการทำสิ่งนี้คืออะไร?

คำตอบ #1

ฉันแก้ไขข้อผิดพลาดนี้โดยการแปลง event.target ให้เป็น HTMLElement โดยตรง

ดังนั้นในกรณีของคุณ:

...
  parentContainer = (event.target as HTMLElement).closest('#container')
...

คำตอบ #2

คุณสามารถทำให้ Typescript เข้าใจว่าเป้าหมายเป็นชนิดใดโดยการระบุตัวสร้างของมัน:

if (event.target instanceof HTMLElement) {
  const container = event.target.closest('#container')
}

บทความที่เกี่ยวข้อง