संपत्ति 'मान' टाइपस्क्रिप्ट में EventTarget पर मौजूद नहीं है

Question

तो निम्नलिखित कोड कोणीय 4 में है और मैं यह पता नहीं लगा सकता कि यह अपेक्षा के अनुरूप काम क्यों नहीं करता है।

यहाँ मेरे हैंडलर का एक स्निपेट दिया गया है:

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

HTML तत्व:

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

कोड मुझे त्रुटि देता है:

संपत्ति 'मान' प्रकार 'EventTarget' पर मौजूद नहीं है।

लेकिन जैसा कि यह देखा जा सकता है console.logकि मूल्य उस पर मौजूद है event.target।

Comments

हम उपयोग कर सकते हैं (e.target as HTMLInputElement)

— .value

Answer 1

event.targetयहाँ एक है HTMLElementजो सभी HTML तत्वों का जनक है, लेकिन संपत्ति होने की गारंटी नहीं है value। टाइपस्क्रिप्ट इस का पता लगाता है और त्रुटि को फेंकता है। event.targetयह सुनिश्चित करने के लिए उपयुक्त HTML तत्व कास्ट करें कि HTMLInputElementजिसके पास valueसंपत्ति है:

(<HTMLInputElement>event.target).value

प्रति प्रलेखन :

लिखें $event

ऊपर दिए गए उदाहरण $eventएक anyप्रकार के रूप में डाले गए हैं । यह लागत पर कोड को सरल करता है। कोई भी प्रकार की जानकारी नहीं है जो घटना ऑब्जेक्ट के गुणों को प्रकट कर सकती है और मूर्खतापूर्ण गलतियों को रोक सकती है।

[...]

$eventअब एक विशिष्ट है KeyboardEvent। सभी तत्वों की valueसंपत्ति नहीं होती है इसलिए यह targetएक इनपुट तत्व के रूप में होता है।

(जोर मेरा)

Comments

थोड़ा क्लीनर वाक्य रचनाvar element = ev.target as HTMLElement

— एड्रियन मोइसा

मेरे लिए, HTMLInputElement ने HTMLElement के बजाय काम किया क्योंकि HTMLElement का इंटरफ़ेस में मूल्य नहीं है।

— हर्षवर्धनी

मेरी राय में, सबसे अच्छा दृष्टिकोण, onFieldUpdate(event: { target: HTMLInputElement }) {तथाकथित फ़ंक्शन में है। नीचे मेरा जवाब देखें।

— belvederef

कोणीय 9 के लिए "सिंटैक्स" के रूप में उपयोग करें। event.target as HtmlInputlement

— प्रीस्कूल

Answer 2

HTMLInputElement को घटना प्रकार के लिए एक सामान्य के रूप में पास करना भी काम करना चाहिए:

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

Comments

यह प्रकार के जोर से बेहतर है।

— जेम्सयिन

यह कार्य नहीं करेगा यदि फ़ंक्शन को onChangeरिएक्ट कोड में एक प्रॉपर हैंडलर संदर्भ कहा जाता है । प्रतिक्रिया हैंडलर को React.ChangeEvent के प्रकार सेट होने की उम्मीद नहीं है और वह टाइपिंग त्रुटि दिखाएगा। मुझे एक कास्ट के साथ, बदले हुए चयनित उत्तर को (एक प्रकार का) वापस करना पड़ा (event.target as HTMLInputElement).value:।

— स्पाइरलिस

यह मेरे लिए एक प्रतिक्रिया घटक में ठीक काम करने के लिए लग रहा था। शायद यह प्रतिक्रिया का संस्करण है? हम वर्तमान में 16.8 पर हैं। *

— नरकतन

Answer 3

यहाँ एक और फिक्स है जो मेरे लिए काम करता है:

(event.target as HTMLInputElement).value

टीएस को यह बताने से त्रुटि से छुटकारा मिलना चाहिए कि event.targetयह एक है HTMLInputElement, जो स्वाभाविक रूप से एक है value। निर्दिष्ट करने से पहले, टीएस संभावना केवल यह जानती थी कि eventअकेले एक था HTMLInputElement, इस प्रकार टीएस के अनुसार की-इन targetकुछ बेतरतीब ढंग से मैप किया गया मूल्य था जो कुछ भी कर सकता था।

Comments

यह वास्तव में रिएक्ट में सहायक था जहां इसने <HTMLInputElement> को JSX के रूप में व्याख्या करने की कोशिश की।

— क्रिस्टोफर ब्रैडशॉ

अरे यार, शेयर के लिए धन्यवाद! यह समाधान मेरे लिए फिट बैठता है।

— कार्लोस क्वेरियोज़

Answer 4

मैं React के साथ एक समान टाइपस्क्रिप्ट त्रुटि के समाधान की तलाश कर रहा था:

संपत्ति 'डेटासेट' टाइपस्क्रिप्ट में EventTarget पर मौजूद नहीं है

मैं event.target.datasetप्रतिक्रिया में एक क्लिक किए गए बटन तत्व को प्राप्त करना चाहता था :

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

इस प्रकार मैं datasetटाइपस्क्रिप्ट के माध्यम से "अस्तित्व" के लिए मूल्य प्राप्त करने में सक्षम था :

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

Comments

प्रश्न को एंगुलर के रूप में चिह्नित किया जाता है, इसलिए एक प्रतिक्रिया का उत्तर विषय से लगता है।

— जॉन स्नो

भले ही ... यह कई वोट है, इस प्रकार यह जवाब दूसरों के लिए उपयोगी है।

— ब्यू स्मिथ

एक जादू की तरह काम करता है। onChange={(event: ChangeEvent<HTMLInputElement>): void => { setTextFilter(event.target.value); }}

— वडकोरक्वेस्ट

Answer 5

जिस तरह से मैं यह कर रहा हूं वह निम्नलिखित है (प्रकार अभिकथन imho से बेहतर):

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

यह मानता है कि आप केवल targetसंपत्ति में रुचि रखते हैं, जो सबसे आम मामला है। यदि आपको अन्य गुणों को एक्सेस करने की आवश्यकता है event, तो एक अधिक व्यापक समाधान में &टाइप चौराहे ऑपरेटर का उपयोग करना शामिल है :

event: Event & { target: HTMLInputElement }

यह एक V..js संस्करण है, लेकिन यह अवधारणा सभी रूपरेखाओं पर लागू होती है। जाहिर है आप अधिक विशिष्ट जा सकते हैं और सामान्य का उपयोग करने के बजाय HTMLInputElementआप HTMLTextAreaElementtextareas के लिए उदाहरण के लिए उपयोग कर सकते हैं ।

Answer 6

event.target.valueयदि आप नहीं देख सकते हैं तो आपको onChange हैंडलर के साथ प्रोप का उपयोग करना चाहिए :

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`.

या यदि आप onChange की तुलना में अन्य हैंडलर का उपयोग करना चाहते हैं, तो उपयोग करें event.currentTarget.value

Comments

यह मेरे लिए काम करता है, लेकिन मुझे यकीन नहीं है कि event.currentTarget.valueयह सबसे अच्छा तरीका है।

— dczii