时间戳

首页 > 解决方案 > 单击其他组件中的某个按钮时更改语义 UI 选项卡

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

问题描述

我的组件中有以下代码，其中AnadB是我的其他组件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 组件。任何帮助将非常感激。谢谢。

标签： javascriptreactjssemantic-uisemantic-ui-react

解决方案

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

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

推荐阅读