टाइपस्क्रिप्ट: प्रतिक्रिया प्रकार

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 और valuetarget पर मौजूद नहीं मिल काम करने लगता है।

सभी घटनाओं के लिए अधिक सामान्यीकृत उत्तर की सराहना की जाएगी।

धन्यवाद

Answer 1

SyntheticEvent इंटरफ़ेस सामान्य है:

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

और currentTarget सामान्य बाधा और EventTarget के एक चौराहे है।
इसके अलावा, चूंकि आपकी घटनाएं इनपुट तत्व के कारण होती हैं, इसलिए आपको FormEvent (in definition file, the react docs) का उपयोग करना चाहिए।

होना चाहिए:

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

Answer 2

समस्या इवेंट प्रकार के साथ नहीं है, लेकिन है कि टाइपप्रति में EventTarget इंटरफ़ेस केवल 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 पर मौजूद नहीं हैं EventTarget। आपको जो गुण करना है वह लक्ष्य को विशिष्ट तत्व प्रकार के साथ लक्षित करने के लिए है जो आपको चाहिए। इस मामले में यह 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 फ़ाइलों को चेकआउट करना है।

भी अधिक स्पष्टीकरण के लिए नीचे दिए गए लिंक की जाँच: Why is Event.target not Element in Typescript?

Answer 3

दोनों Nitzan की और एडविन के जवाब संयोजित करने के लिए, मैंने पाया कि कुछ इस तरह मेरे लिए काम करता है:

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