तो मेरे पास एक बटन के साथ एक प्रतिक्रिया घटक है जिसमें एक क्लिक हैंडलर है जो डेटा- * विशेषता का उपयोग करता है। अगर यह सीधे प्रतिक्रिया थी तो मुझे पता है कि डेटा-* विशेषता से मूल्य कैसे प्राप्त करें। हालांकि मैं टाइपस्क्रिप्ट का उपयोग करना सीख रहा हूं, इसलिए मुझे नहीं पता कि इस विशेषता तक कैसे पहुंच प्राप्त करें। तो टाइपस्क्रिप्ट का उपयोग करके डेटा-* विशेषता तक पहुंच प्राप्त करने का सबसे अच्छा तरीका क्या है?

यह बटन के लिए मेरा JSX कोड है:

<button type="button" className="NavLink" data-appMode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this) }>Main</button>

क्लिक इवेंट के लिए यह मेरा हैंडलर है:

handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
    // What code should go here to access the data-appMode attribute?
}
11
Scott Kingdon 31 अक्टूबर 2019, 00:53

3 जवाब

आपके ईवेंट फ़ंक्शन में आपके पास ई वेरिएबल है, ई बटन पर क्लिक करके निकाल दी गई घटना का प्रतिनिधित्व करता है, ई में एक लक्षित संपत्ति है, इसलिए तत्व से एक विशेषता तक पहुंचने के लिए आपको क्या करना चाहिए:

handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
    const target = e.target as HTMLElement;
    let attr = target.getAttribute("data-attribute-name-here");
    //do something

}
0
Luis Barajas 30 अक्टूबर 2019, 22:31

सबसे अधिक संभावना है कि आपको as सिंटैक्स का उपयोग करना होगा, यह इस बात पर निर्भर करता है कि आप किस संपत्ति को e.target पर एक्सेस करना चाहते हैं।

handleAppModeClick(e: React.MouseEvent) {
    const appMode = (e.target as HTMLButtonElement).getAttribute('data-appMode');
}
0
givehug 30 अक्टूबर 2019, 22:22

टाइपस्क्रिप्ट का उपयोग करके मैंने हाल ही में निम्नलिखित दृष्टिकोण के बारे में सीखा है:

type TabsProps = {
  activeTab: string,
  items: string[],
  setActiveTab: (i: string) => void,
}

const Tabs = ({ items, activeTab, setActiveTab }: TabsProps) => {
  const onClick: React.MouseEventHandler<HTMLElement> = (e) => {
    setActiveTab(e.currentTarget.dataset.id)
    //console.log(e) // <a data-id="0" class="active nav-link">Info</a>
  }

  return (
    <Nav tabs >
        {
            items.map((x, i) => (
                <NavItem key={i}>
                    <NavLink className={activeTab === i.toString() ? 'active' : ''} onClick={onClick} data-id={i}>{x}</NavLink>
                </NavItem>
            ))
        }
    </Nav >
  );
}
0
Dashu 10 जुलाई 2020, 08:38