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;