Skip to content

Commit 2d29d80

Browse files
HaixingOoOgithub-actions[bot]
HaixingOoO
and
github-actions[bot]
authored
fix(Tabs): fix tabs value init active bug (#3614)
* fix(tabs): fix tabs value init active error * test(tabs): update test snap * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent e94cb33 commit 2d29d80

File tree

4 files changed

+13
-79
lines changed

4 files changed

+13
-79
lines changed

‎packages/components/tabs/TabNav.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import parseTNode from '../_util/parseTNode';
1818

1919
export interface TabNavProps extends TdTabsProps, DragSortInnerProps {
2020
itemList: TdTabPanelProps[];
21-
tabClick: (s: TabValue) => void;
2221
activeValue: TabValue;
2322
size?: 'medium' | 'large';
2423
children?: React.ReactNode;
@@ -28,7 +27,6 @@ const TabNav: React.FC<TabNavProps> = (props) => {
2827
const {
2928
placement = 'top',
3029
itemList = [],
31-
tabClick = noop,
3230
theme,
3331
addable,
3432
onAdd,
@@ -201,7 +199,6 @@ const TabNav: React.FC<TabNavProps> = (props) => {
201199
};
202200

203201
const handleTabItemClick = (clickItem) => {
204-
tabClick(clickItem.value);
205202
if (activeValue !== clickItem.value) {
206203
onChange(clickItem.value);
207204
}

‎packages/components/tabs/Tabs.tsx‎

Lines changed: 7 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from 'react';
1+
import React from 'react';
22
import classNames from 'classnames';
33
import { TabValue, TdTabsProps } from './type';
44
import forwardRefWithStatics from '../_util/forwardRefWithStatics';
@@ -9,6 +9,7 @@ import { StyledProps } from '../common';
99
import { tabsDefaultProps } from './defaultProps';
1010
import useDragSorter from '../hooks/useDragSorter';
1111
import useDefaultProps from '../hooks/useDefaultProps';
12+
import useControlled from '../hooks/useControlled';
1213

1314
export interface TabsProps extends TdTabsProps, StyledProps {
1415
children?: React.ReactNode;
@@ -17,18 +18,9 @@ export interface TabsProps extends TdTabsProps, StyledProps {
1718
const Tabs = forwardRefWithStatics(
1819
(originalProps: TabsProps, ref: React.Ref<HTMLDivElement>) => {
1920
const props = useDefaultProps<TabsProps>(originalProps, tabsDefaultProps);
20-
const {
21-
defaultValue,
22-
children,
23-
list,
24-
placement,
25-
value: tabValue,
26-
dragSort,
27-
className,
28-
style,
29-
onRemove,
30-
onChange,
31-
} = props;
21+
const { children, list, placement, dragSort, className, style, onRemove } = props;
22+
23+
const [value, onChange] = useControlled(props, 'value', props.onChange);
3224

3325
// 样式工具引入
3426
const { tdTabsClassPrefix, tdTabsClassGenerator, tdClassGenerator } = useTabClass();
@@ -57,34 +49,11 @@ const Tabs = forwardRefWithStatics(
5749
return null;
5850
});
5951

60-
// 当未设置默认值时，默认选中第一个。
61-
const [value, setValue] = React.useState<TabValue>(() =>
62-
defaultValue === undefined && Array.isArray(itemList) && itemList.length !== 0 ? itemList[0].value : defaultValue,
63-
);
64-
65-
useEffect(() => {
66-
if (tabValue !== undefined) {
67-
setValue(tabValue);
68-
}
69-
}, [tabValue]);
70-
7152
const handleChange = React.useCallback(
7253
(v: TabValue) => {
73-
if (tabValue === undefined) {
74-
setValue(v);
75-
}
7654
onChange?.(v);
7755
},
78-
[tabValue, onChange],
79-
);
80-
81-
const handleClickTab = React.useCallback(
82-
(v: TabValue) => {
83-
if (tabValue === undefined) {
84-
setValue(v);
85-
}
86-
},
87-
[tabValue],
56+
[onChange],
8857
);
8958

9059
const headerNode = React.useMemo<React.ReactNode>(
@@ -96,23 +65,11 @@ const Tabs = forwardRefWithStatics(
9665
activeValue={value}
9766
onRemove={onRemove}
9867
itemList={itemList}
99-
tabClick={handleClickTab}
10068
onChange={handleChange}
10169
/>
10270
</div>
10371
),
104-
[
105-
props,
106-
getDragProps,
107-
value,
108-
onRemove,
109-
itemList,
110-
handleClickTab,
111-
handleChange,
112-
placement,
113-
tdTabsClassGenerator,
114-
tdClassGenerator,
115-
],
72+
[props, getDragProps, value, onRemove, itemList, handleChange, placement, tdTabsClassGenerator, tdClassGenerator],
11673
);
11774

11875
return (

‎test/snap/__snapshots__/csr.test.jsx.snap‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -119943,7 +119943,7 @@ exports[`csr snapshot test > csr test packages/components/tabs/_example/theme.ts
119943119943
class="t-tabs__bar t-is-top"
119944119944
/>
119945119945
<div
119946-
class="t-tabs__nav-item t-size-m t-is-active t-is-top"
119946+
class="t-tabs__nav-item t-size-m t-is-top"
119947119947
>
119948119948
<div
119949119949
class="t-tabs__nav-item-wrapper"
@@ -119975,17 +119975,7 @@ exports[`csr snapshot test > csr test packages/components/tabs/_example/theme.ts
119975119975
</div>
119976119976
<div
119977119977
class="t-tabs__content t-is-top"
119978-
>
119979-
<div
119980-
class="t-tab-panel"
119981-
>
119982-
<div
119983-
style="margin: 20px;"
119984-
>
119985-
选项卡1内容区
119986-
</div>
119987-
</div>
119988-
</div>
119978+
/>
119989119979
</div>
119990119980
</div>
119991119981
<div
@@ -120018,7 +120008,7 @@ exports[`csr snapshot test > csr test packages/components/tabs/_example/theme.ts
120018120008
style="transform: translate(0px, 0);"
120019120009
>
120020120010
<div
120021-
class="t-tabs__nav-item t-tabs__nav--card t-size-m t-is-active t-is-top"
120011+
class="t-tabs__nav-item t-tabs__nav--card t-size-m t-is-top"
120022120012
>
120023120013
<span
120024120014
class="t-tabs__nav-item-text-wrapper"
@@ -120042,17 +120032,7 @@ exports[`csr snapshot test > csr test packages/components/tabs/_example/theme.ts
120042120032
</div>
120043120033
<div
120044120034
class="t-tabs__content t-is-top"
120045-
>
120046-
<div
120047-
class="t-tab-panel"
120048-
>
120049-
<div
120050-
style="margin: 20px;"
120051-
>
120052-
选项卡1内容区
120053-
</div>
120054-
</div>
120055-
</div>
120035+
/>
120056120036
</div>
120057120037
</div>
120058120038
</div>
@@ -139177,7 +139157,7 @@ exports[`ssr snapshot test > ssr test packages/components/tabs/_example/position
139177139157

139178139158
exports[`ssr snapshot test > ssr test packages/components/tabs/_example/size.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tabs"><div class="t-tabs__header t-is-top"><div class="t-tabs__nav" style="min-height:48px"><div class="t-tabs__operations t-tabs__operations--left"></div><div class="t-tabs__operations t-tabs__operations--right"></div><div class="t-tabs__nav-container t-is-top"><div class="t-tabs__nav-scroll"><div class="t-tabs__nav-wrap t-is-smooth" style="transform:translate(0px, 0)"><div class="t-tabs__bar t-is-top"></div><div class="t-tabs__bar t-is-top"></div><div class="t-tabs__nav-item t-size-m t-is-active t-is-top"><div class="t-tabs__nav-item-wrapper"><span class="t-tabs__nav-item-text-wrapper">选项卡1</span></div></div><div class="t-tabs__nav-item t-size-m t-is-top"><div class="t-tabs__nav-item-wrapper"><span class="t-tabs__nav-item-text-wrapper">选项卡2</span></div></div></div></div></div></div></div><div class="t-tabs__content t-is-top"><div class="t-tab-panel"><div style="margin:20px">选项卡1内容区</div></div></div></div></div><div class="t-space-item"><div class="t-tabs"><div class="t-tabs__header t-is-top"><div class="t-tabs__nav" style="min-height:48px"><div class="t-tabs__operations t-tabs__operations--left"></div><div class="t-tabs__operations t-tabs__operations--right"></div><div class="t-tabs__nav-container t-is-top"><div class="t-tabs__nav-scroll"><div class="t-tabs__nav-wrap t-is-smooth" style="transform:translate(0px, 0)"><div class="t-tabs__bar t-is-top"></div><div class="t-tabs__bar t-is-top"></div><div class="t-tabs__nav-item t-size-l t-is-active t-is-top"><div class="t-tabs__nav-item-wrapper"><span class="t-tabs__nav-item-text-wrapper">选项卡1</span></div></div><div class="t-tabs__nav-item t-size-l t-is-top"><div class="t-tabs__nav-item-wrapper"><span class="t-tabs__nav-item-text-wrapper">选项卡2</span></div></div></div></div></div></div></div><div class="t-tabs__content t-is-top"><div class="t-tab-panel"><div style="margin:20px">选项卡1内容区</div></div></div></div></div></div>"`;
139179139159

139180-
exports[`ssr snapshot test > ssr test packages/components/tabs/_example/theme.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tabs"><div class="t-tabs__header t-is-top"><div class="t-tabs__nav" style="min-height:48px"><div class="t-tabs__operations t-tabs__operations--left"></div><div class="t-tabs__operations t-tabs__operations--right"></div><div class="t-tabs__nav-container t-is-top"><div class="t-tabs__nav-scroll"><div class="t-tabs__nav-wrap t-is-smooth" style="transform:translate(0px, 0)"><div class="t-tabs__bar t-is-top"></div><div class="t-tabs__bar t-is-top"></div><div class="t-tabs__nav-item t-size-m t-is-active t-is-top"><div class="t-tabs__nav-item-wrapper"><span class="t-tabs__nav-item-text-wrapper">选项卡1</span></div></div><div class="t-tabs__nav-item t-size-m t-is-top"><div class="t-tabs__nav-item-wrapper"><span class="t-tabs__nav-item-text-wrapper">选项卡2</span></div></div></div></div></div></div></div><div class="t-tabs__content t-is-top"><div class="t-tab-panel"><div style="margin:20px">选项卡1内容区</div></div></div></div></div><div class="t-space-item"><div class="t-tabs"><div class="t-tabs__header t-is-top"><div class="t-tabs__nav" style="min-height:48px"><div class="t-tabs__operations t-tabs__operations--left"></div><div class="t-tabs__operations t-tabs__operations--right"></div><div class="t-tabs__nav-container t-tabs__nav--card t-is-top"><div class="t-tabs__nav-scroll"><div class="t-tabs__nav-wrap t-is-smooth" style="transform:translate(0px, 0)"><div class="t-tabs__nav-item t-tabs__nav--card t-size-m t-is-active t-is-top"><span class="t-tabs__nav-item-text-wrapper">选项卡1</span></div><div class="t-tabs__nav-item t-tabs__nav--card t-size-m t-is-top"><span class="t-tabs__nav-item-text-wrapper">选项卡2</span></div></div></div></div></div></div><div class="t-tabs__content t-is-top"><div class="t-tab-panel"><div style="margin:20px">选项卡1内容区</div></div></div></div></div></div>"`;
139160+
exports[`ssr snapshot test > ssr test packages/components/tabs/_example/theme.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tabs"><div class="t-tabs__header t-is-top"><div class="t-tabs__nav" style="min-height:48px"><div class="t-tabs__operations t-tabs__operations--left"></div><div class="t-tabs__operations t-tabs__operations--right"></div><div class="t-tabs__nav-container t-is-top"><div class="t-tabs__nav-scroll"><div class="t-tabs__nav-wrap t-is-smooth" style="transform:translate(0px, 0)"><div class="t-tabs__bar t-is-top"></div><div class="t-tabs__bar t-is-top"></div><div class="t-tabs__nav-item t-size-m t-is-top"><div class="t-tabs__nav-item-wrapper"><span class="t-tabs__nav-item-text-wrapper">选项卡1</span></div></div><div class="t-tabs__nav-item t-size-m t-is-top"><div class="t-tabs__nav-item-wrapper"><span class="t-tabs__nav-item-text-wrapper">选项卡2</span></div></div></div></div></div></div></div><div class="t-tabs__content t-is-top"></div></div></div><div class="t-space-item"><div class="t-tabs"><div class="t-tabs__header t-is-top"><div class="t-tabs__nav" style="min-height:48px"><div class="t-tabs__operations t-tabs__operations--left"></div><div class="t-tabs__operations t-tabs__operations--right"></div><div class="t-tabs__nav-container t-tabs__nav--card t-is-top"><div class="t-tabs__nav-scroll"><div class="t-tabs__nav-wrap t-is-smooth" style="transform:translate(0px, 0)"><div class="t-tabs__nav-item t-tabs__nav--card t-size-m t-is-top"><span class="t-tabs__nav-item-text-wrapper">选项卡1</span></div><div class="t-tabs__nav-item t-tabs__nav--card t-size-m t-is-top"><span class="t-tabs__nav-item-text-wrapper">选项卡2</span></div></div></div></div></div></div><div class="t-tabs__content t-is-top"></div></div></div></div>"`;
139181139161

139182139162
exports[`ssr snapshot test > ssr test packages/components/tag/_example/base.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><div class="t-tag t-tag--default t-tag--dark"><span title="标签一">标签一</span></div></div><div class="t-space-item"><a href="https://www.tencent.com/zh-cn" target="_blank" rel="noreferrer"><div class="t-tag t-tag--default t-tag--dark"><span title="超链接">超链接</span></div></a></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="标签一">标签一</span></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="标签二">标签二</span></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="标签三">标签三</span></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="标签四">标签四</span></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><div class="t-tag t-tag--default t-tag--light"><span title="灰标签">灰标签</span></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--light"><span title="标签一">标签一</span></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--light"><span title="标签二">标签二</span></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--light"><span title="标签三">标签三</span></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--light"><span title="标签四">标签四</span></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><div class="t-tag t-tag--default t-tag--outline"><span title="灰标签">灰标签</span></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--outline"><span title="标签一">标签一</span></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--outline"><span title="标签二">标签二</span></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--outline"><span title="标签三">标签三</span></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--outline"><span title="标签四">标签四</span></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><div class="t-tag t-tag--default t-tag--light-outline"><span title="灰标签">灰标签</span></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--light-outline"><span title="标签一">标签一</span></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--light-outline"><span title="标签二">标签二</span></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--light-outline"><span title="标签三">标签三</span></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--light-outline"><span title="标签四">标签四</span></div></div></div></div></div>"`;
139183139163

0 commit comments

Comments
 (0)