admin 管理员组文章数量: 1086019
I have the following code in my ponent, where A nad B are my other ponents and SomeComponent is where I am rendering A and B along with the TabExampleSecondaryPointing ponent.
import { Tab } from 'semantic-ui-react';
const panes = [
{ menuItem: 'A', render: () => <Tab.Pane attached={false}> <A/> </Tab.Pane> },
{ menuItem: 'B', render: () => <Tab.Pane attached={false} > <B/> </Tab.Pane> },
]
const TabExampleSecondaryPointing = () => (
<Tab menu={{ secondary: true, pointing: true }} panes={panes} />
)
class SomeComponent extends Component {
render() {
return (
<div>
<TabExampleSecondaryPointing />
</div>
);
}
}
What I want to do is when I click some button inside of ponent A (which is currently active in A Tab) the current or Active Tab should switch to B Tab. I am using Tabs ponent of Semantic UI for React. Any help would be much appreciated. Thanks.
I have the following code in my ponent, where A nad B are my other ponents and SomeComponent is where I am rendering A and B along with the TabExampleSecondaryPointing ponent.
import { Tab } from 'semantic-ui-react';
const panes = [
{ menuItem: 'A', render: () => <Tab.Pane attached={false}> <A/> </Tab.Pane> },
{ menuItem: 'B', render: () => <Tab.Pane attached={false} > <B/> </Tab.Pane> },
]
const TabExampleSecondaryPointing = () => (
<Tab menu={{ secondary: true, pointing: true }} panes={panes} />
)
class SomeComponent extends Component {
render() {
return (
<div>
<TabExampleSecondaryPointing />
</div>
);
}
}
What I want to do is when I click some button inside of ponent A (which is currently active in A Tab) the current or Active Tab should switch to B Tab. I am using Tabs ponent of Semantic UI for React. Any help would be much appreciated. Thanks.
2 Answers
Reset to default 7@Vibhor in the interest of someone else landing on this answer, and perhaps helping you to improve your solution, I would encourage you to take a look at the controlled examples for Tabs on the SUIR documentation.
What you have proposed and implemented as your solution is definitely a workaround. You are using the DOM to simulate a click event to change the auto controlled state of that ponent. What you want to do is directly control that state yourself. Out of the box, many SUIR ponents are handling the state themselves.
I put together a CodeSandbox example for you here showing how this would work with an internal ponent state extending upon the example in the SUIR docs:
https://codesandbox.io/s/k9ozm3w5n7
import React, { Component } from "react";
import { render } from "react-dom";
import { Button, Container, Tab } from "semantic-ui-react";
class TabExampleActiveIndex extends Component {
state = { activeIndex: 1 };
handleRangeChange = e => this.setState({ activeIndex: e.target.value });
handleTabChange = (e, { activeIndex }) => this.setState({ activeIndex });
render() {
const { activeIndex } = this.state;
const panes = [
{
menuItem: "Tab 1",
render: () => (
<Tab.Pane>
Tab 1 Content{" "}
<Button
content="Tab 2"
onClick={this.handleRangeChange}
value={1}
/>
</Tab.Pane>
)
},
{
menuItem: "Tab 2",
render: () => (
<Tab.Pane>
Tab 2 Content{" "}
<Button
content="Tab 3"
onClick={this.handleRangeChange}
value={2}
/>
</Tab.Pane>
)
},
{
menuItem: "Tab 3",
render: () => (
<Tab.Pane>
Tab 3 Content{" "}
<Button
content="Tab 1"
onClick={this.handleRangeChange}
value={0}
/>
</Tab.Pane>
)
}
];
return (
<div>
<div>activeIndex: {activeIndex}</div>
<input
type="range"
max="2"
value={activeIndex}
onChange={this.handleRangeChange}
/>
<Tab
panes={panes}
activeIndex={activeIndex}
onTabChange={this.handleTabChange}
/>
</div>
);
}
}
export default TabExampleActiveIndex;
(<any>$('.menu .item')).tab('change tab', 'tab-name');
本文标签： javascriptChange Semantic UI Tabs on click of some button in other componentStack Overflow
版权声明：本文标题：javascript - Change Semantic UI Tabs on click of some button in other component - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1743990791a2514685.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论