टाइपस्क्रिप्ट: रिएक्ट इवेंट प्रकार

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

घटना के प्रकार? वे सभी डॉक्स में ईवेंट पृष्ठ में वर्णित हैं ।

— नित्ज़न तोमर

मुझे 'नाम' टाइप 'EventTarget & HTMLInputElements' (TS v2.4) पर मौजूद नहीं है

— Falieson

यह अभी भी मुझे निम्न त्रुटि देता है। "संपत्ति 'मान' इवेंटटार्गेट और HTMLInputElement 'पर मौजूद नहीं है।"

— टोमुघेस

@CMCDragonkai मुझे लगता है कि e.keyयह कीबोर्ड की घटनाओं का ही एक हिस्सा है।

— निट्ज्जन तोमर

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

इसके अलावा अधिक स्पष्टीकरण के लिए निम्नलिखित लिंक देखें: Event.target टाइपस्क्रिप्ट में तत्व क्यों नहीं है?

Comments

ps। ऐसा लगता है कि मेरी टाइप डेफ़िनिशन फ़ाइल थोड़ी पुरानी है क्योंकि यह जेनेरिक SyntheticEvent <T> इंटरफ़ेस नहीं दिखाती है। Nitzan Tomer का जवाब बेहतर है।

— एडविन

हां, निट्ज़ान का जवाब साफ-सुथरा लगता है। आपके परिश्रम के लिए धन्यवाद।

— 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 [target.name] = target.value; ??? क्या आप प्रॉप्स को बदल रहे हैं: ओ

— मार्वेन ट्रेबेल्सी

बस मूल प्रश्न से लाइन की नकल करना ताकि उत्तर ओपी के लिए समझ में आए।

— चाम

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मेरे लिए कुंजी थी

— Skyy2010

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
}