单击其他组件中的某些按钮时更改语义 UI 选项卡

Question

我的组件中有以下代码，其中AnadB是我的其他组件，SomeComponent是我与TabExampleSecondaryPointing组件一起呈现A和B的地方。

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>
);
}
}

我想做的是，当我单击组件A(当前在 A 选项卡中处于活动状态)中的某个按钮时，当前或活动选项卡应切换到 B 选项卡。我正在使用语义UI的选项卡组件进行反应。任何帮助将不胜感激。谢谢。

Answer 1

@Vibhor为了其他人找到这个答案，也许可以帮助您改进解决方案，我鼓励您查看SUIR文档中选项卡的受控示例。

您作为解决方案提出和实施的内容绝对是一种解决方法。您正在使用 DOM 模拟单击事件以更改该组件的自动控制状态。您要做的是自己直接控制该状态。开箱即用，许多 SUIR 组件都在自己处理状态。

我在这里为您整理了一个 CodeSandbox 示例，展示了它如何与基于 SUIR 文档中的示例扩展的内部组件状态一起工作：

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;

Answer 2

(<any>$('.menu .item')).tab('change tab', 'tab-name');