টাইপস্ক্রিপ্টে ইভেন্টট্যারেট টাইপ করে সম্পত্তি 'মান' বিদ্যমান নেই

Question

সুতরাং নীচের কোডটি কৌনিক 4 এ রয়েছে এবং কেন এটি প্রত্যাশার মতো কাজ করে না তা আমি বুঝতে পারি না।

আমার হ্যান্ডলারের একটি স্নিপেট এখানে:

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

এইচটিএমএল উপাদান:

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

কোডটি আমাকে ত্রুটি দেয়:

'ইভেন্টট্যাজেট' টাইপ করে সম্পত্তি 'মান' বিদ্যমান নেই।

তবে এটিতে দেখা যায় console.logযে মানটি এর উপর বিদ্যমান event.target।

Comments

আমরা ব্যবহার করতে পারি (এইচটিএমএল ইনপুট এলিমেন্ট হিসাবে eartget)।

— মূল্য

Answer 1

event.targetএখানে এমন একটি HTMLElementযা সমস্ত এইচটিএমএল উপাদানগুলির পিতামাতা, তবে সম্পত্তি থাকার গ্যারান্টিযুক্ত নয় value। টাইপস্ক্রিপ্ট এটি সনাক্ত করে এবং ত্রুটি নিক্ষেপ করে। এতে কোনও সম্পত্তি রয়েছে event.targetতা নিশ্চিত করার জন্য উপযুক্ত এইচটিএমএল উপাদানটিতে কাস্ট করুন :HTMLInputElementvalue

(<HTMLInputElement>event.target).value

ডকুমেন্টেশন প্রতি :

টাইপ করুন $event

উপরের উদাহরণটি টাইপ $eventহিসাবে কাস্ট করে any। এটি একটি ব্যয়ে কোডটি সরল করে। এমন কোনও তথ্য নেই যা ইভেন্ট অবজেক্টের বৈশিষ্ট্য প্রকাশ করতে পারে এবং মূর্খ ভুলগুলি রোধ করতে পারে।

[...]

$eventএখন একটি নির্দিষ্ট KeyboardEvent। সমস্ত উপাদানগুলির একটি valueসম্পত্তি থাকে না তাই এটি targetকোনও ইনপুট উপাদানকে কাস্ট করে।

(জোর আমার)

Comments

কিছুটা ক্লিনার সিনট্যাক্সvar element = ev.target as HTMLElement

— এড্রিয়ান মোইসা

আমার জন্য, এইচটিএমলেমেন্টের পরিবর্তে এইচটিএমএলপুলেটমেন্ট কাজ করেছে কারণ ইন্টারফেসে এইচটিএমলেমেন্টের কোনও মূল্য নেই।

— হর্ষা বর্ধিনী

আমার মতে সেরা পন্থাটি, onFieldUpdate(event: { target: HTMLInputElement }) {কথিত ফাংশনটিতে রয়েছে। আমার উত্তর নীচে দেখুন।

— বেলভেদ্রেফ

কৌণিক 9 এর জন্য "হিসাবে" বাক্য গঠন ব্যবহার করুন। event.target as HtmlInputlement

— প্রেসকোল

Answer 2

ইভেন্ট টাইপের জেনেরিক হিসাবে এইচটিএমএল ইনপুট এলিমেন্ট পাস করাতেও কাজ করা উচিত:

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

Comments

এটি টাইপ অনুসারে তুলনায় ভাল।

— জেমসইন

ফাংশনটি onChangeযদি প্রতিক্রিয়া কোডে যদিও একটি প্রম্পার্টি হ্যান্ডলার রেফারেন্স থেকে কল করা হয় তবে এটি কাজ করবে না । প্রতিক্রিয়াটির হ্যান্ডলারটি প্রত্যাশা করে না যে টাইপটি রি্যাক্টের জন্য সেট করা হবে han চেঞ্জইভেন্ট এবং টাইপিংয়ের ত্রুটি প্রদর্শন করবে। আমি এর পরিবর্তে করার জন্য (একটি বৈকল্পিক) রূপে ফিরিয়ে নিয়ে যেতে নির্বাচিত উত্তর, একটি ঢালাই সঙ্গে ছিল: (event.target as HTMLInputElement).value।

— সর্পিলিস

এটি আমার জন্য একটি প্রতিক্রিয়া উপাদানটিতে সূক্ষ্মভাবে কাজ করেছে বলে মনে হয়েছিল। এটি কি প্রতিক্রিয়াটির সংস্করণ? আমরা বর্তমানে 16.8 এ আছি * *

— হেল্লাতান

Answer 3

এখানে আমার জন্য কাজ করে এমন আরও একটি ফিক্স রয়েছে:

(event.target as HTMLInputElement).value

এটি টিএসকে জানাতে দিয়ে ত্রুটি থেকে মুক্তি পাওয়া উচিত যা event.targetএকটি HTMLInputElement, যা সহজাতভাবে একটি value। নির্দিষ্ট করার আগে, টিএস সম্ভবত কেবল জানত যে eventএকা একটি HTMLInputElement, সুতরাং টিএস অনুসারে কীড-ইন targetকিছু এলোমেলোভাবে ম্যাপ করা মান যা কিছু হতে পারে।

Comments

এটি << এইচটিএমএল ইনপুট এলিমেন্ট> কে জেএসএক্স হিসাবে ব্যাখ্যা করার চেষ্টা করেছিল এমন প্রতিক্রিয়াতে এটি সত্যিই সহায়ক ছিল।

— ক্রিস্টোফার ব্র্যাডশো

আরে মানুষ, ভাগ করে নেওয়ার জন্য ধন্যবাদ! এই সমাধানটি আমার জন্য উপযুক্ত।

— কার্লোস কেরিওজ

Answer 4

আমি প্রতিক্রিয়া সহ অনুরূপ টাইপস্ক্রিপ্ট ত্রুটির সমাধানের সন্ধান করছিলাম:

টাইপস্ক্রিপ্টে ইভেন্টট্যাজেট টাইপ করে সম্পত্তি 'ডেটাसेट' বিদ্যমান নেই

আমি 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

আপনার ব্যবহার করা উচিত event.target.value যদি দেখতে না পান তবে আপনার অন চেঞ্জ হ্যান্ডলারের সাথে প্রপ :

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

বা যদি আপনি অন চেঞ্জের চেয়ে অন্য হ্যান্ডলারটি ব্যবহার করতে চান তবে ব্যবহার করুন event.currentTarget.value

Comments

এটি আমার পক্ষে কাজ করে তবে আমি নিশ্চিত নই যে ব্যবহার event.currentTarget.valueকরা সর্বোত্তম পন্থা।

— ডিসিজিআই

Answer 6

আমি যেভাবে এটি করি তা নিম্নরূপ (প্রেরণের চেয়ে আরও ভাল)

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

এটি ধরে নিয়েছে যে আপনি কেবল targetসম্পত্তিতেই আগ্রহী , এটি সর্বাধিক সাধারণ ঘটনা। আপনার যদি অন্যান্য বৈশিষ্ট্য অ্যাক্সেস করার প্রয়োজন হয় তবে eventআরও বিস্তৃত সমাধানের মধ্যে অন্তর্ভুক্ত &প্রকারের প্রকারটি ব্যবহার করে :

event: Event & { target: HTMLInputElement }

এটি একটি Vue.js সংস্করণ তবে ধারণাটি সমস্ত ফ্রেমওয়ার্কগুলিতে প্রযোজ্য। স্পষ্টতই আপনি আরও সুনির্দিষ্ট যেতে পারেন এবং সাধারণ ব্যবহারের পরিবর্তে HTMLInputElementআপনি যেমন HTMLTextAreaElementটেক্সারিয়াস ব্যবহার করতে পারেন ।