diff --git a/src/components/tab-bar/index.en.md b/src/components/tab-bar/index.en.md index 22990e7dc9..2df1dbc374 100644 --- a/src/components/tab-bar/index.en.md +++ b/src/components/tab-bar/index.en.md @@ -27,12 +27,13 @@ Useful for switching between different pages. ### Props -| Name | Description | Type | Default | -| --- | --- | --- | --- | -| badge | Badge,the same as [Badge](/components/badge) `content` prop | `React.ReactNode \| typeof Badge.dot` | - | -| icon | Icon | `ReactNode \| ((active: boolean) => ReactNode)` | - | +| Name | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| badge | Badge,the same as [Badge](/components/badge) `content` prop | `React.ReactNode \| typeof Badge.dot` | - | | +| icon | Icon | `ReactNode \| ((active: boolean) => ReactNode)` | - | | | key | Corresponding to `activeKey` | `string` | - | -| title | Title | `ReactNode \| ((active: boolean) => ReactNode)` | - | +| title | Title | `ReactNode \| ((active: boolean) => ReactNode)` | - | | +| onClick | Callback when click item | `() => void` | - | 5.38.0 | ## FAQ diff --git a/src/components/tab-bar/index.zh.md b/src/components/tab-bar/index.zh.md index 7d8873c243..5c739cc73b 100644 --- a/src/components/tab-bar/index.zh.md +++ b/src/components/tab-bar/index.zh.md @@ -27,12 +27,13 @@ ### 属性 -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| badge | 徽标,同 [Badge](/zh/components/badge) 的 `content` 属性 | `React.ReactNode \| typeof Badge.dot` | - | -| icon | 图标 | `ReactNode \| ((active: boolean) => ReactNode)` | - | -| key | 对应 `activeKey` | `string` | - | -| title | 标题 | `ReactNode \| ((active: boolean) => ReactNode)` | - | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| badge | 徽标,同 [Badge](/zh/components/badge) 的 `content` 属性 | `React.ReactNode \| typeof Badge.dot` | - | | +| icon | 图标 | `ReactNode \| ((active: boolean) => ReactNode)` | - | | +| key | 对应 `activeKey` | `string` | - | | +| title | 标题 | `ReactNode \| ((active: boolean) => ReactNode)` | - | | +| onClick | 点击事件的回调 | `() => void` | - | 5.38.0 | ## FAQ diff --git a/src/components/tab-bar/tab-bar.tsx b/src/components/tab-bar/tab-bar.tsx index 02c3f7e56a..0050bb3175 100644 --- a/src/components/tab-bar/tab-bar.tsx +++ b/src/components/tab-bar/tab-bar.tsx @@ -12,6 +12,7 @@ export type TabBarItemProps = { icon?: ReactNode | ((active: boolean) => ReactNode) title?: ReactNode | ((active: boolean) => ReactNode) badge?: BadgeProps['content'] + onClick?: () => void } & NativeProps /* istanbul ignore next */ @@ -117,8 +118,11 @@ export const TabBar: FC = p => { key={item.key} onClick={() => { const { key } = item + if (key === undefined || key === null) return + setActiveKey(key.toString()) + item.props.onClick?.() }} className={classNames(`${classPrefix}-item`, { [`${classPrefix}-item-active`]: active, diff --git a/src/components/tab-bar/tests/tab-bar.test.tsx b/src/components/tab-bar/tests/tab-bar.test.tsx index 6d25578ca1..06b4ca3d31 100644 --- a/src/components/tab-bar/tests/tab-bar.test.tsx +++ b/src/components/tab-bar/tests/tab-bar.test.tsx @@ -127,4 +127,20 @@ describe('TabBar', () => { expect(container).toMatchSnapshot() }) + + test('item onClick should be called', () => { + const onClickFn = jest.fn() + + render( + + + + + + ) + + fireEvent.click(document.querySelectorAll(`.adm-tab-bar-item`)[1]) + + expect(onClickFn).toBeCalled() + }) })