ধরণ: ইভেন্টের ধরণের প্রতিক্রিয়া

Question

প্রতিক্রিয়া ইভেন্টগুলির জন্য সঠিক ধরণটি কী। প্রথমদিকে আমি কেবল anyসরলতার জন্য ব্যবহার করেছি । এখন, আমি জিনিসগুলি পরিষ্কার করার চেষ্টা করছি এবং anyসম্পূর্ণরূপে ব্যবহার এড়াতে চাই ।

সুতরাং এটির মতো একটি সাধারণ আকারে:

export interface LoginProps {
  login: {
    [k: string]: string | Function
    uname: string
    passw: string
    logIn: Function
  }
}
@inject('login') @observer
export class Login extends Component<LoginProps, {}> {
  update = (e: React.SyntheticEvent<EventTarget>): void => {
    this.props.login[e.target.name] = e.target.value
  }
  submit = (e: any): void => {
    this.props.login.logIn()
    e.preventDefault()
  }
  render() {
    const { uname, passw } = this.props.login
    return (
      <div id='login' >
        <form>
          <input
            placeholder='Username'
            type="text"
            name='uname'
            value={uname}
            onChange={this.update}
          />
          <input
            placeholder='Password'
            type="password"
            name='passw'
            value={passw}
            onChange={this.update}
          />
          <button type="submit" onClick={this.submit} >
            Submit
          </button>
        </form>
      </div>
    )
  }
}

ইভেন্ট টাইপ হিসাবে আমি এখানে কোন ধরণের ব্যবহার করব?

React.SyntheticEvent<EventTarget>মনে হচ্ছে না যে আমি একটি ত্রুটি পেয়েছি যা বিদ্যমান nameএবং valueএটি বিদ্যমান নেই target।

সমস্ত ইভেন্টের জন্য আরও সাধারণীকরণের উত্তরগুলি সত্যই প্রশংসিত হবে।

ধন্যবাদ

Answer 1

SyntheticEvent ইন্টারফেস জেনেরিক হল:

interface SyntheticEvent<T> {
    ...
    currentTarget: EventTarget & T;
    ...
}

এবং এটি currentTargetজেনেরিক সীমাবদ্ধতার একটি ছেদ এবং EventTarget।
এছাড়াও, যেহেতু আপনার ইভেন্টগুলি কোনও ইনপুট উপাদানটির কারণে ঘটে তাই আপনার ব্যবহার করা উচিত FormEvent( সংজ্ঞা ফাইলে , প্রতিক্রিয়া দস্তাবেজগুলি )।

হতে হবে:

update = (e: React.FormEvent<HTMLInputElement>): void => {
    this.props.login[e.currentTarget.name] = e.currentTarget.value
}

Comments

সমস্ত সাধারণ ইভেন্টের ধরনগুলি পড়ার জন্য ভাল স্পট কী? কোথাও খুঁজে পাওয়া যায়নি।

— r.sendecky

ইভেন্ট ধরণের প্রতিক্রিয়া? এগুলি সমস্ত ডক্সের ইভেন্ট পৃষ্ঠায় বর্ণিত ।

— নিতজান টোমার

আমি 'নাম' টাইপ 'ইভেন্টটিটজেট এবং এইচটিএমএল ইনপুট এলিমেন্টস' (টিএস

— ভি 2.4

এটি এখনও আমাকে নিম্নলিখিত ত্রুটি দেয়। "ইভেন্টট্যাগারেট এবং এইচটিএমএলআইপুটমেমেন্ট" টাইপ করে "সম্পত্তি 'মান' বিদ্যমান নেই।"

— টমহগেস

@CMCDragonkai আমি মনে করি e.keyএটি কেবল কীবোর্ড ইভেন্টের অংশ।

— নিতজান টোমর

Answer 2

সমস্যা ইভেন্ট টাইপের সাথে নয়, তবে টাইপস্ক্রিপ্টে ইভেন্টটরেট ইন্টারফেসের কেবল 3 টি পদ্ধতি রয়েছে:

interface EventTarget {
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
    dispatchEvent(evt: Event): boolean;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

interface SyntheticEvent {
    bubbles: boolean;
    cancelable: boolean;
    currentTarget: EventTarget;
    defaultPrevented: boolean;
    eventPhase: number;
    isTrusted: boolean;
    nativeEvent: Event;
    preventDefault(): void;
    stopPropagation(): void;
    target: EventTarget;
    timeStamp: Date;
    type: string;
}

সুতরাং এটি সঠিক nameএবং valueইভেন্টটরেটে উপস্থিত নেই। আপনাকে যা করতে হবে তা হ'ল আপনার প্রয়োজনীয় বৈশিষ্ট্যগুলির সাথে নির্দিষ্ট উপাদান ধরণের লক্ষ্য নির্ধারণ করা। এক্ষেত্রে তা হবে HTMLInputElement।

update = (e: React.SyntheticEvent): void => {
    let target = e.target as HTMLInputElement;
    this.props.login[target.name] = target.value;
}

এছাড়াও React.SyntheticEvent পরিবর্তে ইভেন্টের জন্য, তোমরাও তাহাদের নিম্নলিখিত হিসাবে টাইপ করতে পারেন: Event, MouseEvent, KeyboardEvent... ইত্যাদি হ্যান্ডলার ব্যবহার ক্ষেত্রে উপর নির্ভর করে।

এই সমস্ত ধরণের সংজ্ঞা দেখার সর্বোত্তম উপায় হ'ল .d.ts ফাইলগুলি উভয় টাইপের স্ক্রিপ্ট থেকে পরীক্ষা করে দেখা এবং প্রতিক্রিয়া জানানো।

আরও ব্যাখ্যার জন্য নীচের লিঙ্কটিও দেখুন: ইভেন্ট.আর্টারজেট টাইপসক্রিপ্টে এলিমেন্ট নয় কেন?

Comments

পুনশ্চ. আমার টাইপ সংজ্ঞা ফাইলটি কিছুটা পুরানো বলে মনে হচ্ছে কারণ এটি জেনেরিক সিনথেটিক ইভেন্ট <T> ইন্টারফেসটি দেখায় না। নিতজান টোমারের উত্তর আরও ভাল।

— এডউইন

হ্যাঁ, নিতজানের উত্তরটি পরিষ্কার মনে হচ্ছে। চেষ্টা করার জন্য ধন্যবাদ.

— r.sendecky

Answer 3

নিতজানের এবং এডউইনের উত্তর উভয়কেই একত্রিত করতে, আমি দেখতে পেয়েছি যে এরকম কিছু আমার পক্ষে কাজ করে:

update = (e: React.FormEvent<EventTarget>): void => {
    let target = e.target as HTMLInputElement;
    this.props.login[target.name] = target.value;
}

Comments

this.props.login [টার্গেট.নেম] = টার্গেট.ভ্যালু; ??? আপনি কি

— প্রপস

কেবল আসল প্রশ্ন থেকে লাইনটি অনুলিপি করা যাতে উত্তরটি ওপিতে বোঝা যায়।

— cham

Answer 4

আমি মনে করি সহজ উপায় হ'ল:

type InputEvent = React.ChangeEvent<HTMLInputElement>;
type ButtonEvent = React.MouseEvent<HTMLButtonElement>;

update = (e: InputEvent): void => this.props.login[e.target.name] = e.target.value;
submit = (e:  ButtonEvent): void => {
    this.props.login.logIn();
    e.preventDefault();
}

Comments

এটা আমার জন্য এটি।

— বেনিয়াম এফ্রেম

.ChangeEventআমার জন্য কী ছিল

— স্কাই 2010

Answer 5

আপনি প্রতিক্রিয়া এই মত করতে পারেন

handleEvent = (e: React.SyntheticEvent<EventTarget>) => {
  const simpleInput = (e.target as HTMLInputElement).value;
  //for simple html input values
  const formInput = (e.target as HTMLFormElement).files[0];
  //for html form elements
}