feat(TabBar): add onClick props to the TabBar.Item

src/components/tab-bar/demos/demo1.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Badge, TabBar } from 'antd-mobile'
+import { Badge, TabBar, Toast } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 import {
   AppOutline,

src/components/tab-bar/index.en.md

@@ -33,6 +33,7 @@ Useful for switching between different pages.
 | icon | Icon | `ReactNode \| ((active: boolean) => ReactNode)` | - |
 | key | Corresponding to `activeKey` | `string` | - |
 | title | Title | `ReactNode \| ((active: boolean) => ReactNode)` | - |
+| onClick | Callback when click item | `(key: string) => void` | - |
 
 ## FAQ
 

src/components/tab-bar/index.zh.md

@@ -33,6 +33,7 @@
 | icon | 图标 | `ReactNode \| ((active: boolean) => ReactNode)` | - |
 | key | 对应 `activeKey` | `string` | - |
 | title | 标题 | `ReactNode \| ((active: boolean) => ReactNode)` | - |
+| onClick | 点击事件的回调 | `(key: string) => void` | - |
 
 ## FAQ
 

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?: (key: string) => void
 } & NativeProps
 
 /* istanbul ignore next */
@@ -117,8 +118,11 @@ export const TabBar: FC<TabBarProps> = p => {
               key={item.key}
               onClick={() => {
                 const { key } = item
+
                 if (key === undefined || key === null) return
+
                 setActiveKey(key.toString())
+                item.props.onClick?.(key as string)
               }}
               className={classNames(`${classPrefix}-item`, {
                 [`${classPrefix}-item-active`]: active,

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(
+      <TabBar>
+        <TabBar.Item key='home' />
+        <TabBar.Item key='icon' onClick={onClickFn} />
+        <TabBar.Item />
+      </TabBar>
+    )
+
+    fireEvent.click(document.querySelectorAll(`.adm-tab-bar-item`)[1])
+
+    expect(onClickFn).toBeCalled()
+  })
 })