टाइपस्क्रिप्ट इनपुट onchange event.target.value

Question

मेरे प्रतिक्रिया और टाइपस्क्रिप्ट ऐप में, मैं उपयोग करता हूं: onChange={(e) => data.motto = (e.target as any).value}।

मैं कक्षा के लिए टाइपिंग को सही तरीके से परिभाषित कैसे करूं, इसलिए मुझे any के साथ टाइप सिस्टम के आसपास अपना रास्ता हैक करना नहीं होगा?

export interface InputProps extends React.HTMLProps<Input> { 
... 

} 

export class Input extends React.Component<InputProps, {}> { 
} 

मैं अगर मैं target: { value: string }; डाल मिलती है:

ERROR in [default] /react-onsenui.d.ts:87:18 
Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'. 
    Types of property 'target' are incompatible. 
    Type '{ value: string; }' is not assignable to type 'string'. 

Answer 1

target आप InputProps में जोड़ने की कोशिश की नहीं एक ही target आप चाहते थे जो React.FormEvent

तो में है, समाधान मैं कर सकता है साथ आया, अपने लक्षित प्रकार को जोड़ने के लिए घटना से संबंधित प्रकारों को विस्तारित करना, जैसे:

interface MyEventTarget extends EventTarget { 
    value: string 
} 

interface MyFormEvent<T> extends React.FormEvent<T> { 
    target: MyEventTarget 
} 

interface InputProps extends React.HTMLProps<Input> { 
    onChange?: React.EventHandler<MyFormEvent<Input>>; 
} 

एक बार जब आप उन वर्गों है, तो आप के रूप में

<Input onChange={e => alert(e.target.value)} /> 

अपने इनपुट घटक का उपयोग बिना त्रुटियों संकलन कर सकते हैं। वास्तव में, आप अपने अन्य घटकों के लिए उपरोक्त पहले दो इंटरफेस का भी उपयोग कर सकते हैं।

Answer 2

आप ई के लिए 'किसी भी प्रकार' को परिभाषित कर सकते हैं। onChange = {(ई: किसी भी) => data.motto = e.target.value}

Answer 3

as HTMLInputElement मुझे

Answer 4

के लिए काम करता है यह है लगता है कि हम e.currentTarget.value उपयोग करना चाहिए।

onChange = (e: React.FormEvent<HTMLInputElement>) => { 
    const newValue = e.currentTarget.value; 
} 

आप इस यहाँ https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 और

Answer 5

भाग्यशाली पढ़ सकते हैं मैं एक समाधान खोजने के। आप

आयात 'ChangeEvent}' प्रतिक्रिया 'से कर सकते हैं;

और उसके बाद कोड लिखने की तरह: e:ChangeEvent<HTMLInputElement>