TypeScript'te EventTarget türünde 'değer' özelliği mevcut değil


121

Bu yüzden aşağıdaki kod Angular 4'tedir ve neden beklendiği gibi çalışmadığını anlayamıyorum.

İşte işleyicimden bir pasaj:

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //this wont work
}

HTML öğesi:

<input type="text" class="form-control" (input)="onUpdatingServerName($event)">

Kod bana şu hatayı veriyor:

"Değer" özelliği, "EventTarget" türünde mevcut değil.

Fakat görülebileceği gibi, console.logbu değer event.target.


2
(e.target as HTMLInputElement) .value
user1162084

Yanıtlar:


147

event.targetburada, HTMLElementtüm HTML öğelerinin ebeveyni olan, ancak özelliğe sahip olduğu garanti edilmeyen bir değerdir value. TypeScript bunu algılar ve hatayı atar. Cast event.targetuygun HTML öğesine o olduğundan emin olmak için HTMLInputElementye sahiptir valueözelliğini:

(<HTMLInputElement>event.target).value

Başına belgeler :

Yaz $event

Yukarıdaki örnek $event, bir anytür olarak atar . Bu, kodu bir maliyetle basitleştirir. Olay nesnesinin özelliklerini ortaya çıkaran ve aptalca hataları önleyen hiçbir tür bilgisi yoktur.

[...]

Artık $eventözeldir KeyboardEvent. Tüm öğelerin bir valueözelliği olmadığından target, bir girdi öğesine yayınlar .

(Vurgu benim)


26
Biraz daha temiz sözdizimivar element = ev.target as HTMLElement
Adrian Moisa

Benim için, HTMLElement arayüzde değere sahip olmadığından, HTMLInputElement HTMLElement yerine çalıştı.
Harsha Vardhini

1
Bence en iyi yaklaşım onFieldUpdate(event: { target: HTMLInputElement }) {çağrılan işleve sahip olmaktır. Aşağıdaki cevabıma bakın.
belvederef

Angular 9 için "as" sözdizimi kullanın. event.target as HtmlInputlement
Prescol

88

HTMLInputElement öğesinin genel olarak olay türüne aktarılması da işe yaramalıdır:

onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event);
  this.newserverName = event.target.value;
}

14
Bu, tip iddialarından daha iyidir.
JamesYin

2
Fonksiyon örneğin onChangeReact kodunda bir proeperty handler referansından çağrılırsa bu çalışmaz. React işleyicisi, türün React.ChangeEvent için ayarlanmasını beklemez ve bir yazım hatası gösterir. Bir bulutları yüzünden yerine (bir varyantı) seçilen cevabı dönmek zorunda kaldı: (event.target as HTMLInputElement).value.
Spiralis

Bu benim için bir React bileşeninde iyi çalışıyor gibi görünüyordu. Belki de React'in sürümüdür? Şu anda 16.8'deyiz. *.
hellatan

49

İşte benim için çalışan başka bir düzeltme:

(event.target as HTMLInputElement).value

Yani TS bildiren tarafından hata kurtulmak gerektiğini event.targetbir olduğunu HTMLInputElementdoğal olarak sahip olduğu, value. Belirtmeden önce, TS muhtemelen yalnızca eventtek başına bir değer olduğunu biliyordu HTMLInputElement, bu nedenle TS'ye göre, targetherhangi bir şey olabilen rastgele eşlenmiş bir değerdi.


4
Bu, <HTMLInputElement> 'i JSX olarak yorumlamaya çalıştığı React'te gerçekten yardımcı oldu.
Christopher Bradshaw

Hey adamım, paylaşım için teşekkürler! Bu çözüm benim için uygun.
Carlos Querioz

16

React ile benzer bir TypeScript hatasına çözüm arıyordum:

TypeScript'te EventTarget türünde 'veri kümesi' özelliği mevcut değil

event.target.datasetReact'te tıklanan bir düğme öğesine ulaşmak istedim :

<button
  onClick={onClickHandler}
  data-index="4"
  data-name="Foo Bar"
>
  Delete Candidate
</button>

datasetTypeScript aracılığıyla "var olma" değerini şu şekilde elde ettim:

const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  const { name, index } = (event.target as HTMLButtonElement).dataset
  console.log({ name, index })
  // do stuff with name and index…
}

1
Soru Açısal olarak etiketlendiğinden bir React cevabı konu dışı görünüyor.
John Snow

2
Her şeye rağmen… birden fazla yukarı oyu var, bu nedenle bu yanıt başkalarına yardımcı oldu.
Beau Smith

1
Tıkır tıkır çalışıyor. onChange={(event: ChangeEvent<HTMLInputElement>): void => { setTextFilter(event.target.value); }}
Vadorequest

4

Bunu yapmamın yolu şudur (tip ispatı imho'dan daha iyi):

onFieldUpdate(event: { target: HTMLInputElement }) {
  this.$emit('onFieldUpdate', event.target.value);
}

Bu, yalnızca targeten yaygın durum olan mülkle ilgilendiğinizi varsayar . Diğer özelliklerine erişmeniz gerekiyorsa event, daha kapsamlı bir çözüm, &tür kavşak operatörünü kullanmayı içerir :

event: Event & { target: HTMLInputElement }

Bu bir Vue.js sürümüdür ancak konsept tüm çerçeveler için geçerlidir. Açıkçası daha spesifik gidebilirsiniz ve bir general kullanmak yerine HTMLInputElementörneğin HTMLTextAreaElementmetin alanları için kullanabilirsiniz .


2

Eğer event.target.valuegöremiyorsan onChange işleyicisi ile prop kullanmalısın :

index.js:1437 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

Veya onChange dışında başka bir işleyici kullanmak istiyorsanız, event.currentTarget.value


bu benim için işe yarıyor ama kullanmanın event.currentTarget.valueen iyi yaklaşım olduğundan emin değilim .
dczii

-2

etkinliğe herhangi bir tür ekleyin

event: any

misal

addEvenListener('mousemove', (event: any) =>{
//CODE//
} )

SO'ya hoş geldiniz! Neden ve nasıl? Lütfen açıkla.
peterh - Monica'yı
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.