diff --git a/components/tabs/Tab.js b/components/tabs/Tab.js index 0fe773183..60a30ae7c 100644 --- a/components/tabs/Tab.js +++ b/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, { diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js index 359905b35..0172b2da2 100644 --- a/components/tabs/Tabs.js +++ b/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); } });