रिएक्ट टाइपस्क्रिप्ट को क्लिक इवेंट से डेटा एट्रीब्यूट मिलता है

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

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

}

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

handleAppModeClick(e: React.MouseEvent) {
    const appMode = (e.target as HTMLButtonElement).getAttribute('data-appMode');
}

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

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 >
  );
}