Fixes #1085

components/tabs/Tab.js

@@ -12,6 +12,7 @@ class Tab extends Component {
     disabled: PropTypes.bool,
     hidden: PropTypes.bool,
     icon: PropTypes.node,
+    index: PropTypes.number,
     label: PropTypes.node,
     onActive: PropTypes.func,
     onClick: PropTypes.func,
@@ -40,13 +41,13 @@ class Tab extends Component {
 
   handleClick = (event) => {
     if (!this.props.disabled && this.props.onClick) {
-      this.props.onClick(event);
+      this.props.onClick(event, this.props.index);
     }
   };
 
   render () {
     const {
-      onActive, // eslint-disable-line
+      index, onActive, // eslint-disable-line
       active, activeClassName, className, disabled, hidden, label, icon, theme, ...other
     } = this.props;
     const _className = classnames(theme.label, {

components/tabs/Tabs.js

@@ -56,9 +56,10 @@ const factory = (Tab, TabContent, FontIcon) => {
       clearTimeout(this.resizeTimeout);
     }
 
-    handleHeaderClick = (event) => {
-      const idx = parseInt(event.currentTarget.id);
-      if (this.props.onChange) this.props.onChange(idx);
+    handleHeaderClick = (idx) => {
+      if (this.props.onChange) {
+        this.props.onChange(idx);
+      }
     };
 
     handleResize = () => {
@@ -130,12 +131,12 @@ const factory = (Tab, TabContent, FontIcon) => {
     renderHeaders (headers) {
       return headers.map((item, idx) => {
         return React.cloneElement(item, {
-          id: idx,
           key: idx,
+          index: idx,
           theme: this.props.theme,
           active: this.props.index === idx,
-          onClick: (event) => {
-            this.handleHeaderClick(event);
+          onClick: (event, index) => {
+            this.handleHeaderClick(index);
             item.props.onClick && item.props.onClick(event);
           }
         });