Definitelytyped: React.SyntheticEvent.target को T पर जेनेरिक बनाएं, React.SyntheticEvent.currentTarget को नहीं

को निर्मित 26 सित॰ 2016 · 7टिप्पणियाँ · स्रोत: DefinitelyTyped/DefinitelyTyped

वर्तमान में, रिएक्ट के SyntheticEvent लिए टाइपप्रति 2.0 हस्ताक्षर इस तरह दिखता है:

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

प्रतिबद्ध a13fa7abf55daedf25b31258b908548f55962c7a के अनुसार, target मूल रूप से EventTarget & T , लेकिन यह परिवर्तन (जाहिरा तौर पर) गलती से 5607f54defce88bc52a0440288f434cafffdb5ce में विलय के दौरान वापस कर दिया गया था।

वर्तमान हस्ताक्षर बहुत सारे प्री-2.0 कोड को तोड़ता है (जैसा कि आप कल्पना कर सकते हैं, रिएक्ट कोड ईवेंट हैंडलर्स से भरा हुआ है) बिना किसी लाभ के (चूंकि अधिकांश कोड event.target पर निर्भर करता है, इसलिए इसका मतलब अभी भी पूर्व पर निर्भर है -2.0 कोड जैसे (event.target as any).value , क्योंकि event.target सामान्य नहीं है।

मुझे एक पैच प्रदान करने में खुशी होगी, लेकिन मैं यह सुनिश्चित करना चाहता हूं कि SyntheticEvent.target उद्देश्य से डी-जेनरेट नहीं किया गया था।

स्रोत

Emm

👍2 👎1

सबसे उपयोगी टिप्पणी

आप संकलन समय पर लक्ष्य के प्रकार को हमेशा नहीं बता सकते हैं। इसे सामान्य बनाना बहुत कम मूल्य का है।
लक्ष्य घटना की उत्पत्ति है (जिसकी कोई वास्तव में परवाह नहीं करता है, यह एक लिंक के अंदर एक अवधि हो सकती है, उदाहरण के लिए)
currentTarget वह तत्व है जिसमें ईवेंट हैंडलर जुड़ा हुआ है, जिसके बारे में आपको बहुत अधिक ध्यान रखना चाहिए और उसके अनुसार टाइप करना चाहिए यदि आपने इसमें कोई डेटासेट या अन्य विशेषताएँ संलग्न की हैं, और रनटाइम पर एक्सेस करने का इरादा रखते हैं।

वर्तमान लक्ष्य के बजाय लक्ष्य पर भरोसा करना एक शुरुआती गलती है जो उन्हें बाद की तुलना में जल्द ही काट देगी।

उदाहरण के लिए:

  handleTabClick = (e: React.SyntheticEvent<HTMLLinkElement>) => {
    e.preventDefault()
    // !!! e.target.dataset is empty if user clicked the <span>, not the <a> !!!
    // !!! how can you type e.target? User might also have clicked the <a> if it has padding !!!
    // you have to use currentTarget, and it is the element that you know the type for sure
    if (e.currentTarget.dataset['closable'] === 'true') {
      this.close()
    }
  }

render() {
  return <a onClick={this.handleTabClick} data-closable="true">
      <span className="fatty">Click me!</span>
   </a>
}

यह कोड संकलित करने के लिए प्रयोग किया जाता है, जैसा इसे करना चाहिए।

मर्ज किए गए 'फिक्स' के साथ, e.currentTarget टाइप करने योग्य नहीं है (मैं टाइप एरर के बिना इसके डेटासेट तक नहीं पहुंच सकता) और e.target को अब HTMLLinkElement के रूप में टाइप किया गया है, जब वास्तव में कोई रास्ता नहीं है हम इसके बारे में सुनिश्चित हो सकते हैं। (मैंने स्पैन को अंदर क्लिक किया होगा।

सैद्धांतिक रूप से हम SyntheticEvent में दूसरा जेनेरिक जोड़ सकते हैं, लक्ष्य टाइप करने के लिए, जब उपयोगकर्ता इसके बारे में निश्चित है (ईवेंट के हैंडलर के लिए कोई बच्चा नहीं है, या वे सभी एक ही प्रकार के हैं)। लेकिन यह बहुत कम मूल्य का है और वास्तव में भ्रामक है (क्योंकि यह केवल विशेष मामलों पर लागू होता है जहां कास्टिंग का उपयोग करना बहुत अधिक समझ में आता है)।
विशेष रूप से, यदि आपके कोई बच्चे नहीं हैं, तो आप वर्तमान लक्ष्य का उपयोग कर सकते हैं।

bbenezech 25 अक्तू॰ 2016

👍27 👎1

सभी 7 टिप्पणियाँ

यह संभवत: विलय के दौरान की गई गलती है। कृपया जनसंपर्क करें।

andy-ms 26 सित॰ 2016

देखें #11041, #10784 और भी बहुत कुछ। एक रहस्य है कि विलय के बाद भी यह तय क्यों नहीं है।

rohitlodha 27 सित॰ 2016

उदाहरण के लिए:

  handleTabClick = (e: React.SyntheticEvent<HTMLLinkElement>) => {
    e.preventDefault()
    // !!! e.target.dataset is empty if user clicked the <span>, not the <a> !!!
    // !!! how can you type e.target? User might also have clicked the <a> if it has padding !!!
    // you have to use currentTarget, and it is the element that you know the type for sure
    if (e.currentTarget.dataset['closable'] === 'true') {
      this.close()
    }
  }

render() {
  return <a onClick={this.handleTabClick} data-closable="true">
      <span className="fatty">Click me!</span>
   </a>
}

यह कोड संकलित करने के लिए प्रयोग किया जाता है, जैसा इसे करना चाहिए।

bbenezech 25 अक्तू॰ 2016

👍27 👎1

साथ ही यह पूरी तरह से गलत है, DOMAttributes<SomeType> , आपको onClick : MouseEventHandler<SomeType> मिलता है, फिर EventHandler<MouseEvent<SomeType>> साथ मिलता है

    interface EventHandler<E extends SyntheticEvent<any>> {
        (event: E): void;
    }

आप बिल्कुल लक्ष्य को currentTarget से अलग टाइप नहीं कर सकते। ऑनक्लिक एक ईवेंट हैंडलर की अपेक्षा करता है जिसमें सामान्य के रूप में ईवेंट (उर्फ वर्तमान लक्ष्य) को संभालना है। यह कुछ और नहीं हो सकता, यह संकलित नहीं होगा।

bbenezech 25 अक्तू॰ 2016

@bbenezech

handleTabClick = (e: React.SyntheticEvent<HTMLLinkElement>) => { ... }

मैं इसके बजाय सुझाव देता हूं:

handleTabClick = (e: React.FormEvent<HTMLLinkElement>) => { ... }

आपके पास ClipboardEvent<T> , CompositionEvent<T> , DragEvent<T> , FocusEvent<T> , KeyboardEvent<T> ...
सिंथेटिकइवेंट निम्न स्तर की चीज है।

tkrotoff 26 अक्तू॰ 2016

👍2

यह अभी भी @types NPM रिपॉजिटरी पर ऐसा ही है। इसे कब प्रकाशित किया जाएगा इस पर कोई अपडेट

matthew-rister 16 दिस॰ 2016

इसे वापस बदल दिया गया था। #12239 देखें।

andy-ms 16 दिस॰ 2016

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Definitelytyped: React.SyntheticEvent.target को T पर जेनेरिक बनाएं, React.SyntheticEvent.currentTarget को नहीं

सबसे उपयोगी टिप्पणी

सभी 7 टिप्पणियाँ

संबंधित मुद्दों