diff --git a/packages/react-search-tree/README.md b/packages/react-search-tree/README.md
index a1e3606e30..b034cdae91 100644
--- a/packages/react-search-tree/README.md
+++ b/packages/react-search-tree/README.md
@@ -295,6 +295,7 @@ const form=useRef()
onChange={(selectd, selectedAll, isChecked)=>console.log('SearchTree-> onChange', selectd, selectedAll, isChecked)}
options={data}
placeholder="请选择选项"
+ treeProps={{ style:{ 'height':200, overflow:'scroll' }}}
/>
)
},
diff --git a/packages/react-tabs/README.md b/packages/react-tabs/README.md
index c4eb458f34..7b5c1cfb5f 100644
--- a/packages/react-tabs/README.md
+++ b/packages/react-tabs/README.md
@@ -48,19 +48,34 @@ ReactDOM.render(, _mount_);
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
-import { Tabs } from 'uiw';
+import { Tabs,Button } from 'uiw';
class Demo extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ activeKey: '1',
+ };
+ }
+ onClick() {
+ const { activeKey } = this.state;
+ this.setState({activeKey: activeKey < 4 ? (Number(activeKey) + 1).toString() :'1'})
+ };
+
render() {
return (
- {
+ <>
+
+ {
console.log("=>", key, tab);
+ this.setState({activeKey: key})
}}>
用户管理
配置管理
角色管理
大爷欢乐多22
-
+
+ >
);
}
}
diff --git a/packages/react-tabs/src/index.tsx b/packages/react-tabs/src/index.tsx
index 6f1a05ce79..2d52e3dfc9 100644
--- a/packages/react-tabs/src/index.tsx
+++ b/packages/react-tabs/src/index.tsx
@@ -66,14 +66,14 @@ export default function Tabs(props: TabsProps) {
}
}, []);
- const divNavRef = useCallback((node, key: number, itemKey: React.Key | null) => {
+ const divNavRef = useCallback((node, key: number, itemKey: React.Key | null, activeKey) => {
if (node !== null) {
- node.addEventListener('click', (e: any) => {
- activeItem.current = node;
- });
+ // node.addEventListener('click', (e: any) => {
+ // activeItem.current = node;
+ // });
divNavWidthChange(node.getBoundingClientRect().width, key);
- if (itemKey === props.activeKey && type === 'line' && labelWidth === 0) {
+ if (itemKey === activeKey) {
activeItem.current = node;
}
}
@@ -103,9 +103,8 @@ export default function Tabs(props: TabsProps) {
}
};
- useEffect(() => setActiveKey(props.activeKey), [props.activeKey]);
+ useEffect(() => setActiveKey(props?.activeKey || ''), [props.activeKey]);
useEffect(() => calcSlideStyle(), [activeKey]);
-
function calcSlideStyle() {
if (activeItem.current && type === 'line') {
labelWidth = activeItem.current.clientWidth;
@@ -176,7 +175,7 @@ export default function Tabs(props: TabsProps) {
calcSlideStyle();
};
}
- return
divNavRef(ref, key, item.key)} {...divProps} />;
+ return
divNavRef(ref, key, item.key, activeKey)} {...divProps} />;
});
}
}
diff --git a/website/src/routes/components/tabs/index.tsx b/website/src/routes/components/tabs/index.tsx
index eb572559a0..9b9cd92e06 100755
--- a/website/src/routes/components/tabs/index.tsx
+++ b/website/src/routes/components/tabs/index.tsx
@@ -1,11 +1,11 @@
import React from 'react';
-import { Tabs, Divider } from 'uiw';
+import { Tabs, Divider, Button } from 'uiw';
import Markdown from '../../../components/Markdown';
export default () => (
{
const md = await import('uiw/node_modules/@uiw/react-tabs/README.md');
return md.default || md;