reactjs - "[ts] 'EventTarget' türünde 'getAttribute' özelliği mevcut değil" hatasını nasıl düzeltirim

TypeScript kullanırken React'te hedef özniteliğini yakalamak için bir onClick olay tipi oluşturmaya çalışıyorum. Ama "[ts] Property 'getAttribute' does not exist on type 'EventTarget'" hatası alıyorum. Bunu düzeltmek için en iyi uygulama konusunda fikir verebilecek biri var mı?

event.target kısmı için başka bir yardımcı fonksiyon kullanmayı denedim. Bu şekilde bu kısmı yazdırabilir ve getAttribute kısmını bu fonksiyonda kullanabilirim. Ancak, bunun en iyi uygulama olmadığı ve yanlış bir yaklaşıma sahip olduğu söylendi.

const Option = (props: OptionProps) => {

  const HandleOptionChange = (event: React.MouseEvent<HTMLLIElement>) => {
    return props.onOptionChange(event.target.getAttribute('value'));
  }

  return (
    <li
      key={props.key}
      value={JSON.stringify(props.word)}
      onClick={HandleOptionChange}
    >
      {props.word.value}
    </li>
  )
}

ts hata mesajı:

[ts] 'getAttribute' özelliği 'EventTarget' türünde mevcut değil. any

Cevap #1

bu benim için işe yarıyor

const HandleOptionChange = (event: React.MouseEvent<HTMLLIElement>) => {
    const el = event.target as HTMLInputElement
    return props.onOptionChange(el.getAttribute('value'));
  }

event.target türü olarak HTMLInputElement'i yeni ekledim

Cevap #2

Eski bir soru, ama başkasıyla karşılaşırsa işte bir cevap:

event.target yerine event.currentTarget kullanmalısınız

event.currentTarget, dinleyiciyi eklediğiniz öğeye işaret eder. Bu durumda, React.MouseEvent<HTMLLIElement> ile belirtildiği üzere HTMLLIElement öğesidir.

event.target ise, olayın kaynağı olan öğedir ve bu, dinleyicinin bağlı olduğu öğe olmayabilir! <li> öğesinin herhangi bir çocuğu tıklanırsa bir fare olayı başlatabilir. Öğenin türü bilinmediği için, çünkü bu gerçekten herhangi bir şey olabilir (<p> veya <img> veya <div> veya başka herhangi bir şey), TypeScript üzerinde herhangi bir değer/metodun mevcut olduğunu doğrulayamaz.

bunu düşün:

return (
  <li
    key={props.key}
    value={JSON.stringify(props.word)}
    onClick={HandleOptionChange}
  >
    content of the li
    <div>
      header title for the image
      <img src="https://example.image.source/" />
    </div>
  </li>
)

Resme tıklayabilirdiniz ve event.target, bir değer özniteliği olmayan <img> elementi olurdu, bu da kodunuzun bir hata vermesine neden olurdu. Aynı şey, resim için "başlık başlığı"na tıkladığınızda da olurdu; event.target, <div> elementi olurdu.

event.currentTarget kullanmak, bu senaryoların tamamında dinleyicinin ekli olduğu <li> öğesini her zaman döndürecektir. Kodunuz, hata vermek yerine bu senaryoların tamamında beklediğiniz şekilde davranacaktır.

Bu konuyla ilgilenen ve benzer durumlara bakan herkes için bir not olarak: Davit'in cevabı, nedeni ele almadan semptomu ele alıyor ve kendi kod tabanınızda linter'ınızın hatalarını gizleyebilir. Hatanın nedenini anladığınızdan emin olun ki sadece gizlemek yerine onu düzeltebilesiniz.

İlgili makaleler