Question

我的组件中有以下代码，其中A nad B是我的其他组件，SomeComponent是我呈现A和B的位置以及TabExampleSecondaryPointing组件。

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标签。我正在使用React的Semantic UI的Tabs组件。任何帮助将非常感激。感谢。

Answer 1

@Vibhor为了其他人对此答案的兴趣，也许可以帮助您改进解决方案，我建议您查看controlled examples for Tabs on the SUIR documentation。

您提出并实施的解决方案绝对是一种解决方法。您正在使用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;

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

1 个答案: